CSS 选择器

选择器参考表

下面的表格让你可以浏览你可以用的选择器。

通配选择器

概述

在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同.

在CSS3中,星号(*)可以和命名空间组合使用:

• ns|* - 会匹配ns命名空间下的所有元素
• *|* - 会匹配所有命名空间下的所有元素
• |* - 会匹配所有没有命名空间的元素

示例

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

上面的CSS作用于下面的HTML:

<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

则会产生这样的效果:

A green span in a red paragraph.

A red span in a green paragraph (with a border.)

ID 选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

语法

#id属性值 {样式声明 }

它与下面的属性选择器语句等价：

[id=id属性值] {样式声明 }

示例

CSS

span#identified {
  background-color: DodgerBlue;
}

HTML

  <span id="identified">Here's a span with some text.</span>
  <span>Here's another.</span>

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

语法

[attr]

表示带有以 attr 命名的属性的元素。

[attr=value]

表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]

表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

[attr^=value]

表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]

表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]

表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

伪类

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

注意： 与伪类相反，pseudo-elements 可被用于为一个元素的 特定部分 应用样式。

语法

selector:pseudo-class {
  property: value;
}

类似于普通的类，你可以在一个选择器中同时一起写多个伪类。

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

注意：与伪元素比较，pseudo-classes 能够根据状态改变元素样式。

语法

selector::pseudo-element {
  property: value;
}

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

注意：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

标准伪元素索引

• ::after (:after)
• ::backdrop 
• ::before (:before)
• ::cue (:cue)
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::grammar-error 
• ::marker 
• ::placeholder 
• ::selection
• ::slotted()
• ::spelling-error