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),您可能需要包括后退的方法。