CSS3 常用选择器示例

选择器 类型 说明 示例
* 通配选择器 选择文档中所有的元素

所有段落文本都将显示为斜体。
E{...} 元素选择器 指定该 CSS 样式对所有 E 元素起作用

所有段落文本都将显示为斜体。
#myid ID 选择器 选择匹配 E 的元素，且匹配元素的 id 属性值等于 mid
这个 div 的 id 是 mid。
.warning 类选择器 选择匹配 E 的元素，且匹配元素的 class 属性值等于 warning。 这是一个警告文本。
E[foo] 属性选择器 选择匹配 E 的元素，且该元素定义了 foo 属性。注意，E 选择符可以省略，表示选择定义了 foo 属性的任意类型的元素。
这是一个具有 foo 属性的 div。
E[foo="bar"] 属性选择器 选择匹配 E 的元素，且该元素将 foo 属性值定义为"bar"。注意，E 选择符可以省略，用法与上一个选择器类似。
这是一个 foo 属性值为 "bar" 的 div。
E[foo~="en"] 属性选择器 选择匹配 E 的元素，且该元素定义了 foo 属性，foo 属性值是一个用连字符（-）分割的列表，值开头的字符为"en"。注意，E 选择符可以省略，用法与上一个选择器类似。
这是一个 foo 属性值为 "en-us" 的 div。
E F 包含选择器 选择匹配 F 的元素，且该元素被包含在匹配 E 的元素内。注意，E 和 F 不仅是指类型选择器，而且可以是任意合法的选择符组合。

这是一个包含在 div 内的 p 元素。
E > F 子包含选择器 选择匹配 F 的元素，且该元素为所匹配 E 的元素的子元素。注意，E 和 F 不仅是指类型选择器，而且可以是任意合法的选择符组合。
  • 这是一个 ul 的直接子元素 li。
E + F 相邻兄弟选择器 选择匹配 F 的元素，且该元素位于所匹配 E 的元素后面相邻的位置。注意，E 和 F 不仅是指类型选择器，而且可以是任意合法的选择符组合。

标题

这是一个紧跟在 h1 后面的 p 元素。
E ~ F 通用兄弟元素选择器 选择匹配 F 元素，且 F 元素与 E 同级且位于 E 的后面。注意，E 和 F 不仅是指类型选择器，而且可以是任意合法的选择符组合。

标题

这是一个 h2 后面的 p 元素。
E:link 链接伪类选择器 选择匹配 E 的元素，且匹配元素被定义了超链接并未被访问。例如，a:link 选择器能够匹配已定义 URL 的 a 元素。 这是一个未被访问的链接。
E:visited 链接伪类选择器 选择匹配 E 的元素，且匹配元素被定义了超链接并已被访问。例如，a:visited 选择器能够匹配已被访问的 a 元素。 这是一个已被访问的链接。
E:active 用户操作伪类选择器 选择匹配 E 的元素，且匹配元素被激活。 这是一个被激活的链接。
E:hover 用户操作伪类选择器 选择匹配 E 的元素，且匹配元素正被鼠标经过。 这是一个鼠标经过的链接。
E:focus 用户操作伪类选择器 选择匹配 E 的元素，且匹配元素获得了焦点。 这是一个获得焦点的 input 元素。
E:first-line 伪元素选择器 选择匹配 E 的元素内的第一行文本。

这是 p 元素的第一行文本。这是第二行文本。
E:first-letter 伪元素选择器 选择匹配 E 的元素内的第一个字符。

这是 p 元素的第一个字符。
E:first-child 结构伪类选择器 选择匹配 E 的元素，且该元素为父元素的第一个子元素。
  • 这是 ul 的第一个 li 子元素。
  • 这是第二个 li 子元素。
E:before 伪元素选择器 在匹配 E 的元素前面插入内容。

这是在 p 元素前面插入的内容。
E:after 伪元素选择器 在匹配 E 的元素后面插入内容。

这是在 p 元素后面插入的内容。