简介

选择器是 CSS 中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。麻烦的是，当整个网站或整个 Web 应用程序全部书写好之后，需要针对样式表进行修改的时候，在洋洋洒洒一大篇 CSS 代码之中，并没有说明什么样式服务于什么元素，只是使用了 class 属性，然后在页面中指定了元素的 class 属性。

使用元素的 class 属性有两个缺点 :

第一， class 属性本身没有语义，它纯粹是用来为 CSS 样式服务的，属于多余属性
第二，使用 class 属性，并没有把样式与元素绑定起来，针对同一个 class 属性，文本框也可以使用，下拉框也可以使用，甚至按钮也可以使用，这样是非常混乱的，修改样式的时候也很不方便

在 CSS3 中，提倡使用选择器将样式与元素直接绑定起来，这样在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。为此， CSS3 增加并完善了选择器的功能，以便更灵活地匹配页面元素。

ID 选择器的特殊性为 100
类选择器、属性选择器和伪类选择器的特殊性为 10
类型选择器和伪元素选择器的特殊性为 1
关系选择器中的分隔符（如 + 、 > 、 ~ 、 ''）和通配选择器的特殊性为 0，虽然为 0，但还是会比无特殊性要强

标签选择器

h1 {
  ...;
}

ID 选择器

#divNav {
  ...;
}

类选择器

.topDiv {
  ...;
}

指定选择器

div.topDiv {
  ...;
}

div#divNav {
  ...;
}

包含选择器

div p {
  ...;
}

子选择器

div > p {
  ...;
}

相邻选择器

h1 + p {
  ...;
}

兄弟选择器

h1 ~ p {
  ...;
}

分组选择器

h1,
h2,
h3,
h4,
h5,
h6 {
  ...;
}

伪选择器

:link{...} 链接
:visited{...} 访问
E:hover 选择器
E:active 选择器
E:focus 选择器
E:enabled 选择器
E:disabled 选择器
E:read-only 选择器
E:read-write 选择器
E:checked 选择器
E:default 选择器
E:indeterminate 选择器
E::selection 选择器
E:invalid 选择器
E:valid 选择器
E:required 选择器
E:optional 选择器
E:in-range 选择器
E:out-of-range 选择器

如果采用如下所示的 [att$=val]属性选择器，并且将 val 指定为" -1"，则页面中 id 为" subsection1-1" 、 " subsection2-1"的 div 元素的背景色都变为黄色，因为这些元素的 id 属性的结尾字符都为" -1"字符。另外请注意该属性选择器中在指定匹配字符前必须加上" "这个 escape 字符。

E:indeterminate 伪类选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定。到目前为止，只有 Opera 浏览器对这个选择器提供支持。

·E:invalid 伪类选择器用来指定，当元素内容不能通过 HTML 5 通过使用元素的诸如 required 、 pattern 等属性所指定的检查或元素内容不符合元素的规定格式（例如通过使用 type 属性值为 Email 的 input 元素来限定元素内容必须为有效的 Email 格式）时的样式。

·E:valid 伪类选择器用来指定，当元素内容通过 HTML 5 通过使用元素的诸如 required 、 pattern 等属性所指定的检查或元素内容符合元素的规定格式（例如通过使用 type 属性值为 Email 的 input 元素来限定元素内容必须为有效的 Email 格式）时的样式。

E:default 选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是，即使用户将该单选框或复选框控件的选取状态设定为非选取状态， E:default 选择器中指定的样式仍然有效。

E:checked 伪类选择器用来指定当表单中的 radio 单选框或 checkbox 复选框处于选取状态时的样式。

·E:read-only 伪类选择器用来指定当元素处于只读状态时的样式。

·E:read-write 伪类选择器用来指定当元素处于非只读状态时的样式。

E:enabled 伪类选择器用来指定当元素处于可用状态时的样式。

·E:disabled 伪类选择器用来指定当元素处于不可用状态时的样式。

结构伪类选择器

E:root 选择匹配 E 所在文档的根元素。在（ X ） HTML 文档中，根元素就是 html 元素，此时该选择器与 html 类型选择器匹配内容相同
E:nth-child(n) 选择所有在其父元素中第 n 个位置的匹配 E 的子元素。
tr:nth-child(3)匹配所有表格里排第 3 行的 tr 元素
tr:nth-child(2n+1)匹配所有表格的奇数行
tr:nth-child(2n)匹配所有表格的偶数行
tr:nth-child(odd)匹配所有表格的奇数行
tr:nth-child(even)匹配所有表格的偶数行
E:nth-last-child(n) 选择所有在其父元素中倒数第 n 个位置的匹配 E 的子元素
E:nth-of-type(n) 选择所有在其父元素中同类型第 n 个位置的匹配 E 的子元素
E:first-child 匹配第一个元素
E:last-child 选择位于其父元素中最后一个位置，且匹配 E 的子元素
:nth-of-type() 在同类型中匹配特定的子元素
:nth-last-of-type() 按倒序在同类型中匹配特定的子元素
E:last-of-type() 选择在其父元素中匹配 E 的最后一个同类型的子元
E:only-child 选择其父元素只包含一个子元素，且该子元素匹配 E
E:only-of-type 选择其父元素只包含一个同类型子元素，且该子元素匹配 E
E:empty 选择匹配 E 的元素，且该元素不包含子节点

属性选择器

匹配属性名 [class] { color: #f00;}
匹配属性值 div[id][title="ok"] {color: #0ff;}
E[foo~=" bar" ] : 选择匹配 E 的元素，且该元素定义了 foo 属性， foo 属性值是一个以空格符分隔的列表，其中一个列表值为 "bar" 。例如， a[title~=" bar1″ ] 匹配 <a title=" bar1 bar2bar3″ > </a>，而不匹配 <a title=" bar2 bar3 bar4″ > </a>
E[foo|=" en" ] : 选择匹配 E 的元素，且该元素定义了 foo 属性， foo 属性值是一个以连字符（-）分隔的列表，值开头的字符为 "en" 。例如， [lang|="en" ] 匹配 <body lang="en-us" ><body>，而不匹配 <body lang="fr-argot" ><body>
前缀匹配 [class^="My"] {color: #00f;}
后缀匹配 [class$="test"] {color: #0f0;}
模糊匹配 [class*="est"] {color: #ff0;}

通用匹配符

* {
  ...;
}

其它选择器

E:not(s) 否定伪类选择器类型。选择匹配 E 的所有元素，且过滤掉匹配 s 选择符的任意元素。 s 是一个简单结构的选择器，不能够使用复合选择器。 E:not(s)选择器相当于二次过滤，适合精确选择元素
E:target 目标伪类选择器类型。选择匹配 E 的所有元素，且匹配元素被相关 URL 指向。该选择器是动态选择器，只有当存在 URL 指向该匹配元素时，样式效果才能够有效

UI 伪类选择器

UI 元素状态伪类是 CSS3 新设计的选择器，其中 UI 是 User Interface （用户界面）的简写， UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定和待机等。

E:enabled 选择匹配 E 的所有可用 UI 元素。在网页中， UI 元素一般是指包含在 form 元素内的表单元素
E:disabled 选择匹配 E 的所有不可用 UI 元素
E:checked 选择匹配 E 的所有可用 UI 元素

伪对象选择器

:before

在某元素之前。

二、冲突规则

CSS 代表层叠样式表（Cascading Style Sheets），层叠对于 SS 很重要。

资源顺序：资源循序对层叠很重要，如果多条应用在同一个元素，那么后面的规则就会应用
优先级：与层叠密切相关的是优先级，决定在发生冲突的时候应该使用哪条规则
重要性：有一个特殊的 CSS 可以用来覆盖上面所有的优先级计算---!important

1. `!import` 的作用和潜在问题

!important 会使得调试 CSS 变得困难，因为它更改了层叠的常规工作方式。

三、继承机制

一些设置在父元素的 CSS 属性可以被子元素继承，而另一些不能。

CSS 为控制继承提供了 5 个特殊的通用属性值，每个 CSS 属性都接收这些值：

inherit：设置该属性会使子元素和父元素相同（开启继承）
initial：将应用于选定元素的属性值设置为该属性的初始值
revert：将应用于选定的元素的属性值设定为浏览器的默认样式，而不是应用于该属性的默认值。在多数情况下，该值作用类似于 unset
revert-layer：将应用于选定元素的属性值重制为上一个层叠层中建立的值
unset：将属性设置为自然值，也就是如果属性是自然继承那么就是 inherit ，否则就是 initial 一样

1. 重制所有的属性值

CSS 简写属性 all 可以同时将这些继承值中的一个应用于（几乎）所有属性。它的值可以是其中任意一个（inherit 、 initial 、 unset 、 revert）。这是一种撤销对样式所做的更改的简便方法，以便回到之前的已知的起点。

.all-unset {
  all: unset;
}

分类​

标签选择器​

ID 选择器​

类选择器​

指定选择器​

包含选择器​

子选择器​

相邻选择器​

兄弟选择器​

分组选择器​

伪选择器​

结构伪类选择器​

属性选择器​

通用匹配符​

其它选择器​

UI 伪类选择器​

伪对象选择器​