CSS3之选择器

CSS3没有采用总体结构，而是采用了分工协作的模块化结构。

CSS历史

---

1. 1996年12月，CSS1正式推出。
2. 1998年5月， CSS2正式推出。
3. 2004年2月， CSS2.1正式推出。
4. 2010年， CSS3正式推出。

选择器

---

1. CSS3中追加了3个属性选择器：
   [att*]=val : 如果元素att表示的属性的属性值包含用val指定的字符，则该元素使用这个样式。
   [att^]=val : 如果元素用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个样式。
   [att$]=val : 如果元素用att表示的属性的属性值的结尾字符为用val指定的字符的话，那么该元素使用这个样式。

2. 伪元素选择器
   伪元素选择器并不针对真正的元素使用，而是针对CSS中已经定义好的伪元素。
   ①. first-line: 向某个元素的第一行文字使用样式。
   ②. first-letter: 向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
   ③. before: 在某个元素之前插入一些内容。
   ④. after: 在某个元素之后插入一些内容。

3. 结构性为类选择器
   结构性伪类选择器的共同特征是允许开发者根据文档树中的结构指定元素的样式。
   ①. root： 将样式适用到页面的根元素中。根元素是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的””部分。
   ②. not : 如果想对某个结构元素使用样式，但是想拍出这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
   ③. empty： 指定当元素内容为空白时使用的样式。
   ④. target： 对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
   ⑤. first-child与last-child: 单独指定第一个子元素、最后一个子元素的样式。
   ⑥. nth-child与nth-last-child： 对指定序号的子元素使用样式。（例如：nth-child(3)表示第三个子元素，nth-last-child(3)表示倒数第三个子元素。）
   ⑦. nth-of-type和nth-last-of-type : 与⑥大致相同，只是⑥是针对所有类型的子元素，而它是针对同一种类型的子元素。
   ⑧. 循环使用样式：nth-child(4n+1)、nth-child(4n+2)、nth-child(4n+3)、nth-child(4n+4)
   ⑨. only-child：指定当某个父元素只有一个子元素时才使用的样式。

4. UI元素状态伪类选择器
   ①. E:hover
   ②. E:active
   ③. E:focus
   ④. E:enabled
   ⑤. E:disabled
   ⑥. E:read-only
   ⑦. E:read-write
   ⑧. E:checked
   ⑨. E:selection
   ⑩. E:default
   ⑪. E:interminate
   ⑫. E:invalid
   ⑬. E:valid
   ⑭. E:required
   ⑮. E:optional
   ⑯. E:in-range
   ⑰. E:out-of-range