---
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="/zh-CN/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="/zh-CN/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="/zh-CN/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="/zh-CN/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="/zh-CN/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="/zh-CN/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="/zh-CN/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="/zh-CN/docs/Web/CSS/Child_combinator">Child combinator</a>）</dt>
<dd><code>></code> 组合器选择前一个元素的直接子代的节点。<br>
<strong>语法</strong>：<code><var>A</var> > <var>B</var></code><br>
<strong>例子</strong>：<code>ul > li</code> 匹配直接嵌套在 {{HTMLElement("ul")}} 元素内的所有 {{HTMLElement("li")}} 元素。</dd>
<dt><a href="/zh-CN/docs/Web/CSS/General_sibling_selectors">一般兄弟组合器</a>（<a href="/zh-CN/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="/zh-CN/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>></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>