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>\
