CSS3选择器

CSS 选择器是指使用样式表设计 HTML 元素样式的方式。例如，要在所有 元素周围放置边框，将使用选择器 div：div { border: 1px solid #000; }。 要对具有类 highlight 的所有元素应用背景颜色，将使用选择器 .highlight：.highlight { background-color: yellow; }。 最后，要更改 ID 属性值为 myDiv 的元素的宽度，将使用：#myDiv { width: 250px; }。 当然，可以合并这些选择器，所以要选择具有类 highlight 的所有 元素，将使用 div.highlight，或者要选择具有 ID myDiv 的 元素，将使用 div#myDiv。 除了这些简单的选择器，CSS 还包括（并且自从以前的版本以来就已经这样）一系列更复杂的选择器。例如，可以使用选择器 input[type=“text”] 来选择仅包含属性类型的值为 text 的 input 元素。或者可以使用伪类 :hover 设计鼠标置于元素之上时该元素的样式，例如：a:hover { color: red; }。 还有许多其他选择器，所有这些选择器都是提供用来使选择要设计样式的元素变得更容易。使用 CSS3，向该集合中添加了甚至更多新选择器，它们都使开发人员的工作更轻松并减少了他们需要编写的 HTML 和 JavaScript 数量。

属性选择器 E[foo^=“bar”] 选择元素 E，其 foo 属性以字符串 bar 开头

E[foo$=“bar”] 选择元素 E，其 foo 属性以字符串 bar 结尾

E[foo*=“bar”] 选择元素 E，其 foo 属性包含字符串 bar

结构伪类 E:root 选择元素 E，文档的根（ 标记）

E:nth-child(n) 选择元素 E，其父元素的第 n 个子级

E:nth-last-child(n) 选择元素 E，其父元素的倒数第 n 个子级

E:nth-of-type(n) 选择元素 E，其类型的第 n 个同级

E:nth-last-of-type(n) 选择元素 E，其类型的倒数第 n 个同级

E:last-child 选择元素 E，其是其父元素的最后一个子级（请注意 E:first-child 是以前在 CSS2 中定义的）

E:first-of-type 选择元素 E，其类型的第一个同级

E:last-of-type 选择元素 E，其类型的最后一个同级

E:only-child 选择元素 E，其父元素的惟一子级

E:only-of-type 选择元素 E，其类型的惟一同级

E:empty 选择元素 E，其没有子级（包括文本节点）

target 伪类 E:target 选择元素 E，其实所指 URI 的目标

UI 元素状态伪类 E:enabled 选择用户界面元素 E，其为启用状态

E:disabled 选择用户界面元素 E，其为禁用状态

E:checked 选择用户界面元素 E（单选按钮或复选框），其为选中状态

Negation 伪类 E:not(s) 选择元素 E，其与简单的选择器 s 不匹配

常规同级配合器 E ~ F 选择元素 F，其前面是元素 E 浏览器对新的属性选择器和常规同级配合器的支持非常好，因为它们计划可以在所有现代 Web 浏览器中使用。大多数浏览器的最新版本中包括了对新的伪类的支持，但是对于较旧的浏览器（例如 Internet Explorer 6/7 和 Firefox 3.0），您可能需要包括后退的方法。