1）简单CSS选择器
对于常用的元素，因为有明确的名称和属性，用简单CSS选择器就可以选择到。简单选择器主要有：元素选择器、属性选择器、群组选择器，通配选择器，属性选择器；其中ID、CLASS是属性选择器最常见的。
- 元素选择器：根据元素进行选择，如div{}
- 群组选择器：根据某一组进行，如h2,h3{}等
- 通配选择器：通配选择器是元素选择器的特例；*{}所有的元素都适配；
- 属性选择器：根据元素的属性进行选择，主要有class,id二个属性；
- 类选择器：根据class属性进行选择
- ID选择器：根据ID属性进行选择
例如：
body{}
div{}
a{}
h2{}
.menu{} 对应class
#logo{} 对应ID
在做优先级上。
标签 < class < id
或者
标签 < 属性，
class类属性 < id属性
2）上下文选择器
为了简化源代码，减少给元素过多的属性，有时候会通过上下关系进行选择，为了表达这些层次，那么就需要引入：祖、父、兄弟、仔这四个概念，每一个元素所在的位置都是相对的，可以是父也可以是仔，取决于以哪一个作为参照。
如
<div class="aaa">A
<div class="bbb">B
<div class="ccc">C1</div>
<div class="ccc">C2</div>
<div class="ccc center">C3</div>
<div class="ccc">C4</div>
<div class="ccc">C5</div>
</div>
</div>
bbb既是aaa仔也是ccc父，aaa是ccc的祖，
选择器规则是：
| 选择器 | 操作符 | 描述 | 举例 |
|---|---|---|---|
| 后代选择器 | 空格 | 选择当前元素的所有后代元素 | div p, body * |
| 父子选择器 | > | 选择当前元素的所有子元素 | div > h2 |
| 同级相邻选择器 | + | 选择拥有共同父级且相邻的元素 | li.red + li |
| 同级所有选择器 | ~ | 选择拥有共同父级的后续所有元素 | li.red ~ li |
如
选择ccc下的div，可用： .bbb div{}
选择有center属于的下一个：.ccc.center + .ccc{}
3）伪类选择器
对于一些比较复杂、难能明确选择的，可以通过伪类选择器进行选择，如常用的链接样式a:link,a:visited等就属于这一类。伪类选择器有三种：
- 1）结构伪类，伪类又分为“不分组伪类”和“分组伪类”；
无分组的
对于多个div之类的，可以通过结构伪类选择器进行选择，选择其中的某一个，或某几个，比如第一个，div:first-child,表示选中div中的第一个，last就是最后一个，中间的可以用div:nth-child(n)来选择，n从1开始，如果选择偶数的则用2n，n从0开始，如果选择奇数，就用2n-1,中间加入last表示从后往前数第几个，如倒数第二div：nth-last-child(2)
如：
例子：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
大方格中有九个小方格，选择第一个小方格
.container > :first-child{}
选择最后一个
.container > :last-child{}
倒数第二个
.container > :nth-last-child(2){}
选择第六个
.container > :nth-child(6){}
奇数个
.container > :nth-child(2n-1){}
偶数个
.container > :nth-child(2n){}
第5-9个
.container > :nth-child(n + 5){}
第1-3个
.container > :nth-child(-n + 3){}
child(n)中，N表达式的规律是，双数为2n,单数为2n-1，前5个为-n+5,后5个为n+5
有分组的
有分类时，就是分组伪类选择，与不分组伪类基本一致，把child换成type，注意是从该类的第一个开始就行了。
2）表单，是在表单中，有某一属性的无素进行选择
如input:enabled,input:disenabled,input:require等，对这些有同一属性的进行选择；选择表单中所有禁用的：input:disabled {}
- 选择表单中所有可用的：input:enabled {}
- 表单中所要要求填写的：input:require {}
等等
- 3）其它，如链接a:link,a:visited,a:hover,a:active等，以及:root,:focus,:not(),:empty等，主要以链接四个状态为主；