jQuery
1.1.1 基础选择器
|
|
类选择器 $(‘.class’) |
$( ‘. 类名称’ ) |
标签选择器 $(‘p’) |
$( ‘标签名称’ ) |
Id选择器 $(‘#id’) |
$( ‘#id名称’ ) |
通配符选择器 $(‘*’) |
$( ‘ *’ ) |
并集选择器（逗号） $(‘h1,h2,h3’) |
$(‘ h1,h2,h3,h4,h5,h6’) |
后代选择器(空格) $(‘ul li’) |
$(‘ul li’); |
子代选择器（选孩子）> $(‘body>*’) |
$( ‘body>*’ ) |
向后选第一个兄弟 + $(‘p+div’) |
$(‘p+div’) 选p后第一个div |
向后选所有的兄弟~$(p+div) |
$(‘p~div’)选p后所有的div |
1.1.2 伪类选择器
|
|
选第一个 $(‘li:first’) |
$( ‘li:first’ ) |
选最后一个$(‘li:last’) |
$(‘li:last’) |
排除哪一个 :not$(‘li:not(:last)’) |
$(‘li:not(:last)’) 排除最后一个 |
选偶数组 :even$(‘li:even’) |
$(‘li:even’) |
选奇数组 :odd$(‘li:odd’) |
$(‘li:odd’) |
选大于n的$(li:gt(n)) |
$(‘li:gt(n)’) |
选小于n的$(li:lt(n)) |
$(‘li:lt(n)’) |
选等于n的$(‘li:eq(n)’) |
$(‘li:eq(n)’) |
1.1.3 关系选择器
有三个组成的， 父 子 兄
父 parent( )
子 children( )
兄 siblings( )
css3 选择器
例： .box div div:not(:nth-child(2)):not(:nth-child(1)){background-color:purple;}
1.1.1 基础选择器
|
|
|
选择器 |
作用 |
|
> |
子代选择器 （选儿子） |
|
+ |
向后选第一个兄弟 |
|
~ |
向后选所有的兄弟 |
|
1.1.2 属性选择器
|
|
|
Li[class] |
选择li中含有class属性的这些 |
|
Li[class=”one”] |
选择li中class属性为one的这些 |
|
Li[data-q] |
选择li中属性为data-q的这些 |
data-表示一个自定义的属性，-后边的值可以随便写； 不仅css可以用，js也可以使用； |
Li[class^=”o”] |
选择li中class属性以o开头的这些 |
|
Li[class$=”1”] |
选择li中class属性以1结尾的这些 |
|
Li[class*=”o”] |
选择li中class属性含有o的这些； |
|
1.1 伪类选择器
|
|
|
Li:first-child |
选择第一个li |
|
Li:last-child |
选择最后一个li |
|
Li:nth-child(n) |
选择第n个li，n是从1开始 |
|
Li:nth-child(even) Li:nth-child(2n) |
选择li为偶数的这组 |
也可以通过2n
|
Li:nth-child(odd) Li:nth-child(2n+1) |
选择li为奇数的这组
|
也可以通过2n+1或者2n-1 |
Li:not(.one) |
选择li中除class为one的这组 |
|
Li:empty |
选择li中为空的 |
为空：指不仅没有文字，标签，也不能有任何的回车，空格； |
div:before |
在内部的前边 |
必须要有content属性，即使里边内容为空 |
Div:after |
在内部的后边 |
通常 |
div:before{
Content:” ”;
}
css3 例子1
.main .mpart ul li:not(:nth-child(6)):not(:nth-child(7)) span input
css3 例子2
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/* .box div div:not(:nth-child(2)):not(:nth-child(1)){
background-color:purple;}*/
/*.box>div{
background-color:purple;} > 选儿子 不包括孙子*/
/* .box div div:first-child+div{
background-color:purple;
} + 选择 同级中的下一个 */
.box div div:nth-child(1)~div:not(:nth-child(2)){
background:purple;} /*~ 选择同级下的所有兄弟*/
</style>
</head>
<body>
<div class="box" style="width:800px; height:600px; border:solid 2px red;">
<div style=" display:flex; width:600px; height:200px; border:solid 2px green;">
<div style="width:200px; height:200px; border:solid 2px orange;"></div>
<div style="width:200px; height:200px; border:solid 2px orange;"></div>
<div style="width:200px; height:200px; border:solid 2px orange;"></div>
</div>
<div style="width:600px; height:200px; border:solid 2px green;"></div>
<div style="width:600px; height:200px; border:solid 2px green;"></div>
</div>
</body>
</html>