0406CSS 选择器

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等，主要以链接四个状态为主；