files/zh-cn/web/css/css_selectors/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: CSS 选择器
slug: Web/CSS/CSS_Selectors
tags:
  - CSS
  - CSS Selector
  - CSS 优先级
  - Overview
  - Reference
  - Selectors
  - 参考
  - 直接子代组合器
  - 选择器
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef("Selectors")}}</div>

<p class="summary"><span class="seoSummary"><strong>CSS 选择器</strong>规定了 CSS 规则会被应用到哪些元素上。</span></p>

<div class="blockIndicator note">
<p><strong>备注</strong>：暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。</p>
</div>

<h2 id="基本选择器">基本选择器</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/CSS/Universal_selectors">通用选择器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a>）</dt>
 <dd>选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。<br>
 <strong>语法：</strong><code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
 <strong>例子：</strong><code>*</code> 将匹配文档的所有元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Type_selectors">元素选择器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors">Type selector</a>）</dt>
 <dd>按照给定的节点名称，选择所有匹配的元素。<br>
 <strong>语法：</strong><code><var>elementname</var></code><br>
 <strong>例子：</strong><code>input</code> 匹配任何 {{HTMLElement( "input" )}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Class_selectors">类选择器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors">Class selector</a>）</dt>
 <dd>按照给定的 <code>class</code> 属性的值，选择所有匹配的元素。<br>
 <strong>语法</strong>：<code>.<var>classname</var></code><br>
 <strong>例子</strong>：<code>.index</code> 匹配任何 <code>class</code> 属性中含有 "index" 类的元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/ID_selectors">ID 选择器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors">ID selector</a>）</dt>
 <dd>按照 <code>id</code> 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。<br>
 <strong>语法：</strong><code>#<var>idname</var></code><br>
 <strong>例子：</strong><code>#toc</code> 匹配 ID 为 "toc" 的元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Attribute_selectors">属性选择器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a>）</dt>
 <dd>按照给定的属性，选择所有匹配的元素。<br>
 <strong>语法：</strong><code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
 <strong>例子：</strong><code>[autoplay]</code> 选择所有具有 <code>autoplay</code> 属性的元素（不论这个属性的值是什么）。</dd>
</dl>

<h2 id="分组选择器（Grouping_selectors）">分组选择器（Grouping selectors）</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/CSS/Selector_list">选择器列表</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a>）</dt>
 <dd><code>,</code> 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。<br>
 <strong>语法</strong>：<code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
 <strong>示例</strong>：<code>div, span</code> 会同时匹配 {{HTMLElement("span")}} 元素和 {{HTMLElement("div")}} 元素。</dd>
</dl>

<h2 id="组合器（Combinators）">组合器（Combinators）</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/CSS/Descendant_selectors">后代组合器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a>）</dt>
 <dd><code> </code>（空格）组合器选择前一个元素的后代节点。<br>
 <strong>语法：</strong><code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
 <strong>例子：</strong><code>div span</code> 匹配所有位于任意 {{HTMLElement("div")}} 元素之内的 {{HTMLElement("span")}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Child_selectors">直接子代组合器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">Child combinator</a>）</dt>
 <dd><code>&gt;</code> 组合器选择前一个元素的直接子代的节点。<br>
 <strong>语法</strong>：<code><var>A</var> &gt; <var>B</var></code><br>
 <strong>例子</strong>：<code>ul &gt; li</code> 匹配直接嵌套在 {{HTMLElement("ul")}} 元素内的所有 {{HTMLElement("li")}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/General_sibling_selectors">一般兄弟组合器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a>）</dt>
 <dd><code>~</code> 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。<br>
 <strong>语法</strong>：<code><var>A</var> ~ <var>B</var></code><br>
 <strong>例子</strong>：<code>p ~ span</code> 匹配同一父元素下，{{HTMLElement("p")}} 元素后的所有 {{HTMLElement("span")}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Adjacent_sibling_selectors">紧邻兄弟组合器</a>（<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a>）</dt>
 <dd><code>+</code> 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。<br>
 <strong>语法：</strong><code><var>A</var> + <var>B</var></code><br>
 <strong>例子：</strong><code>h2 + p</code> 会匹配所有紧邻在 {{HTMLElement("h2")}} 元素后的 {{HTMLElement("p")}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Column_combinator">列组合器</a>（<a href="/en-US/docs/Web/CSS/Column_combinator">Column combinator</a>）{{Experimental_Inline}}</dt>
 <dd><code>||</code> 组合器选择属于某个表格行的节点。<br>
 <strong>语法：</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
 <strong>例子：</strong> <code>col || td</code> 会匹配所有 {{HTMLElement("col")}} 作用域内的 {{HTMLElement("td")}} 元素。</dd>
</dl>

<h2 id="伪选择器（Pseudo）">伪选择器（Pseudo）</h2>

<dl>
 <dt><a href="/zh-CN/docs/Web/CSS/Pseudo-classes">伪类</a></dt>
 <dd><code>:</code> 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。<br>
 <strong>例子：</strong><code>a:visited</code> 匹配所有曾被访问过的 {{HTMLElement("a")}} 元素。</dd>
 <dt><a href="/zh-CN/docs/Web/CSS/Pseudo-elements">伪元素</a></dt>
 <dd><code>::</code> 伪选择器用于表示无法用 HTML 语义表达的实体。<br>
 <strong>例子：</strong><code>p::first-line</code> 匹配所有 {{HTMLElement("p")}} 元素的第一行。</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Selectors")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>增加 <code>||</code> 列组合器，网格结构选择器（grid structural selectors），逻辑选择器（logical combinators）, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>新增 <code>~</code> 一般兄弟选择器和 <strong>伪类</strong>。<br>
    规定伪元素选择器使用 <code>::</code> 前缀。增加 <strong>属性</strong> 选择器。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "selector.html")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>新增 <code>&gt;</code> 子元素选择器和 <code>+</code> 相邻兄弟选择器。<br>
    新增 <strong>通用 </strong>选择器和 <strong>属性 </strong>选择器。</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>最初定义版本.</td>
  </tr>
 </tbody>
</table>

<p> <a href="/zh-CN/docs/Web/CSS/Pseudo-classes#Specifications">伪类</a>和<a href="/zh-CN/docs/Web/CSS/Pseudo-elements#Specifications">伪元素</a>的规范位于各自的页面中。</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/Specificity">CSS 优先级</a></li>
</ul>