CSS 选择器

基本选择器（5类）、组合选择器（4个）、伪选择器（2类）、分组选择器

CSS 选择器是 CSS 规则的一部分。CSS 规则描述了该规则将匹配文档中的哪些元素，匹配到的元素将应用规则的指定样式。

CSS 选择器有四大类：

basic selectors，基本选择器
combinators /ˈkɒmbɪneɪtər/，组合/复合符
pseudo /ˈs(j)uːdoʊ/ selectors，伪选择器
grouping selectors，分组选择器

四类选择器

1. 基本选择器

选择器

说明

备注

ID 选择器

#id

类选择器

.class

类型选择器

elementName

可带命名空间

属性选择器

根据特定属性的存在或值

通配符

* 匹配所有类型

可带命名空间

可以使用命名空间的选择器（类型选择器和通配符）在处理包含多个命名空间的文档时会很有用，比如 HTML5 里带有内联的 SVG 和 MathML，或者 XML 元素。

2. 组合选择器

选择器

说明

备注

A B

全后代

来的都是亲戚（后辈）

A > B

直接子

> 直系后一代（子女）

A + B

紧跟后面的那一个亲兄弟

+ 手拉手的那一个（兄弟）

A ~ B

后面的全部兄弟们

~ 一条船上的（兄弟）

3. 伪选择器

选择器

说明

备注

伪类

: 元素的特定状态

伪元素

:: 元素的特定部分

后产生的所以有两个:

4. 分组选择器

选择器

说明

备注

A, B

多个独立选择器以 , 分隔

很直观

下面详细介绍下属性选择器、伪类和伪元素。

详细介绍

1. 属性选择器（9个）

属性选择器根据给定属性的存在或值来匹配元素。

格式

说明

例子

[attr]

存在属性

[required]

[attr=value]

属性值等于 value

input[type="text"]

[attr^=value]

值以 value 开头

a[href^="#"]

[attr$=value]

值以 value 结尾

a[href$="github.com"]

[attr*=value]

值包含 value 字符串

a[href*="/docs/"]

[attr~=value]

空格分隔的值，其中有个等于 value

div[class~="g-title"]

[attr|=value]

值等于 value 或值以 value 开头且后跟连字符 -

div[lang|="zh"]

[attr operator value i]

属性选择器后跟字符 i 或 I，表示比较不分大小写（ASCII 字符）

[attr operator value s]

属性选择器后跟字符 s 或 S，表示比较区分大小写（ASCII 字符）

a[href*="cAsE" s]

case-Sensitive，大小写敏感 case-Insensitive，大小写不敏感

属性选择器可以将多个连起来使用，比如 a[href^="https"][href$=".com"]。

2. 伪类（64个）

伪类根据所选元素的指定状态来匹配元素。

分类

伪类

说明

用户操作（5个）

:hover :active

:focus :focus-visible :focus-within

位置（7个）

:link :visited :any-link :local-link

没被访问的链接已被访问包含以上两种指向相同文档的链接

:target :target-within

当前文档里的目标元素

:scope

选择器的参考点

DOM 树结构（14个）

:first-child :last-child :only-child :nth-child() :nth-last-child()

兄弟 (An+B)

:first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type()

也是兄弟 (An+B)

:empty

没孩子，除了空白字符

:root

根节点

:nth-col() :nth-last-col()

输入（17个）

:disabled :enabled :checked :required :optional :read-write :read-only

禁用状态启用必填可选可读写（可编辑）只读（不能修改）

:placeholder-shown :blank :valid :invalid :user-invalid :in-range :out-of-range :autofill

显示占位符内容是空内容有效内容无效输入无效（仅交互时）值在范围内值超范围了内容被浏览器自动填充了

:default :indeterminate

一组表单元素中的默认元素状态不确定的表单元素

语言（2个）

:lang() :dir()

多媒体（7个）

:past :current :future

WebVTT，比如字幕

:playing :paused

多媒体的状态

:fullscreen :picture-in-picture

Web Components（4个）

:defined :host :host() :host-context()

Paged Media（3个）

:first :left :right

其它（5个）

:is() :where() :not() :has()

老版本 matches(), :any()

:state()

pseudo-classes
user action ... 用户操作
location ... 位置
tree-structural ... 树结构
the input ... 输入
linguistic ... 语言
time-dimensional ... 时间维度
resource state ... 资源状态

3. 伪元素（16个）

伪元素用于选择元素的特定部分，我们只能在选择器中使用一个伪元素，且它必须在简单选择器之后。

分类

伪元素

说明

最常用（8个）

::before ::after

::first-letter ::first-line

::selection

被用户选中的内容，比如在文本上单击或拖拽鼠标

::placeholder

占位符文本，<input> 或 <textarea>

::file-selector-button

type="file" 的 <input>

::marker

列表项的标记框，通常是个圆点或数字

其它（4个）

::slotted() ::part()

Web Components

::cue ::cue-region

WebVTT 提示，比如字幕

实验中（4个）

::backdrop

全屏模式下，比如使用了全屏 API 或是 <dialog> 元素

::target-text

滚动到的文本，对于支持滚动到文本片段的浏览器

::spelling-error

浏览器标记为拼写错误的文本片段

::grammar-error

浏览器标记为语法错误的文本片段

总结

这部分简要介绍了 CSS 选择器，旨在对其有个整体印象。

例子

/* 命名空间 */
@namespace svg url(http://www.w3.org/2000/svg);
svg|* {
  color: blue;
}
svg|a {
  color: red;
}

/* 通配符 */
article *:first-child {
  font-weight: bold;
}
article:first-child {
  font-weight: bold;
}
.floating + * {
  clear: left;
}

/* 属性选择器 */
div[lang] {
  color: green;
}
div:not([lang]) {
  font-style: italic;
}
div[data-lang="zh-TW"] {
  color: purple;
}
div[lang|="zh"] {
  color: red;
}
a[href^="https"][href$=".com"] {
  text-decoration: underline;
}

/* 组合符 */
img + p {
  font-weight: bold;
}
h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}
ul.my-things li {
  margin: 2em;
}

/* 伪类+伪元素 */
a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}
a:hover {
  color: hotpink;
}
article p:first-child {
  font-size: 120%;
  font-weight: bold;
}
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
.box::after {
  content: " ➥";
}

/* 多个简单选择器可连成一个 */
h1#heading {
  color: rebeccapurple;
}
li.spacious.elegant {
  margin: 2em;
}
ul > li[class="a"] {
}
a[href^="https"][href$=".com"] {
  text-decoration: underline;
}

/* 分组选择器 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}

#main,
.content,
article {
  font-size: 1.1em;
}

扩展阅读

PreviousTODO NextCSS At-rule

Last updated 1 year ago

CSS 选择器

基本选择器（5类）、组合选择器（4个）、伪选择器（2类）、分组选择器

CSS 选择器是 CSS 规则的一部分。CSS 规则描述了该规则将匹配文档中的哪些元素，匹配到的元素将应用规则的指定样式。

CSS 选择器有四大类：

basic selectors，基本选择器
combinators /ˈkɒmbɪneɪtər/，组合/复合符
pseudo /ˈs(j)uːdoʊ/ selectors，伪选择器
grouping selectors，分组选择器

四类选择器

1. 基本选择器

选择器

说明

备注

ID 选择器

#id

类选择器

.class

类型选择器

elementName

可带命名空间

属性选择器

根据特定属性的存在或值

通配符

* 匹配所有类型

可带命名空间

可以使用命名空间的选择器（类型选择器和通配符）在处理包含多个命名空间的文档时会很有用，比如 HTML5 里带有内联的 SVG 和 MathML，或者 XML 元素。

2. 组合选择器

选择器

说明

备注

A B

全后代

来的都是亲戚（后辈）

A > B

直接子

> 直系后一代（子女）

A + B

紧跟后面的那一个亲兄弟

+ 手拉手的那一个（兄弟）

A ~ B

后面的全部兄弟们

~ 一条船上的（兄弟）

3. 伪选择器

选择器

说明

备注

伪类

: 元素的特定状态

伪元素

:: 元素的特定部分

后产生的所以有两个:

4. 分组选择器

选择器

说明

备注

A, B

多个独立选择器以 , 分隔

很直观

下面详细介绍下属性选择器、伪类和伪元素。

详细介绍

1. 属性选择器（9个）

属性选择器根据给定属性的存在或值来匹配元素。

格式

说明

例子

[attr]

存在属性

[required]

[attr=value]

属性值等于 value

input[type="text"]

[attr^=value]

值以 value 开头

a[href^="#"]

[attr$=value]

值以 value 结尾

a[href$="github.com"]

[attr*=value]

值包含 value 字符串

a[href*="/docs/"]

[attr~=value]

空格分隔的值，其中有个等于 value

div[class~="g-title"]

[attr|=value]

值等于 value 或值以 value 开头且后跟连字符 -

div[lang|="zh"]

[attr operator value i]

属性选择器后跟字符 i 或 I，表示比较不分大小写（ASCII 字符）

[attr operator value s]

属性选择器后跟字符 s 或 S，表示比较区分大小写（ASCII 字符）

a[href*="cAsE" s]

case-Sensitive，大小写敏感 case-Insensitive，大小写不敏感

属性选择器可以将多个连起来使用，比如 a[href^="https"][href$=".com"]。

2. 伪类（64个）

伪类根据所选元素的指定状态来匹配元素。

分类

伪类

说明

用户操作（5个）

:hover :active

:focus :focus-visible :focus-within

位置（7个）

:link :visited :any-link :local-link

没被访问的链接已被访问包含以上两种指向相同文档的链接

:target :target-within

当前文档里的目标元素

:scope

选择器的参考点

DOM 树结构（14个）

:first-child :last-child :only-child :nth-child() :nth-last-child()

兄弟 (An+B)

:first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type()

也是兄弟 (An+B)

:empty

没孩子，除了空白字符

:root

根节点

:nth-col() :nth-last-col()

输入（17个）

:disabled :enabled :checked :required :optional :read-write :read-only

禁用状态启用必填可选可读写（可编辑）只读（不能修改）

:placeholder-shown :blank :valid :invalid :user-invalid :in-range :out-of-range :autofill

显示占位符内容是空内容有效内容无效输入无效（仅交互时）值在范围内值超范围了内容被浏览器自动填充了

:default :indeterminate

一组表单元素中的默认元素状态不确定的表单元素

语言（2个）

:lang() :dir()

多媒体（7个）

:past :current :future

WebVTT，比如字幕

:playing :paused

多媒体的状态

:fullscreen :picture-in-picture

Web Components（4个）

:defined :host :host() :host-context()

Paged Media（3个）

:first :left :right

其它（5个）

:is() :where() :not() :has()

老版本 matches(), :any()

:state()

pseudo-classes
user action ... 用户操作
location ... 位置
tree-structural ... 树结构
the input ... 输入
linguistic ... 语言
time-dimensional ... 时间维度
resource state ... 资源状态

3. 伪元素（16个）

伪元素用于选择元素的特定部分，我们只能在选择器中使用一个伪元素，且它必须在简单选择器之后。

分类

伪元素

说明

最常用（8个）

::before ::after

::first-letter ::first-line

::selection

被用户选中的内容，比如在文本上单击或拖拽鼠标

::placeholder

占位符文本，<input> 或 <textarea>

::file-selector-button

type="file" 的 <input>

::marker

列表项的标记框，通常是个圆点或数字

其它（4个）

::slotted() ::part()

Web Components

::cue ::cue-region

WebVTT 提示，比如字幕

实验中（4个）

::backdrop

全屏模式下，比如使用了全屏 API 或是 <dialog> 元素

::target-text

滚动到的文本，对于支持滚动到文本片段的浏览器

::spelling-error

浏览器标记为拼写错误的文本片段

::grammar-error

浏览器标记为语法错误的文本片段

总结

这部分简要介绍了 CSS 选择器，旨在对其有个整体印象。

例子

/* 命名空间 */
@namespace svg url(http://www.w3.org/2000/svg);
svg|* {
  color: blue;
}
svg|a {
  color: red;
}

/* 通配符 */
article *:first-child {
  font-weight: bold;
}
article:first-child {
  font-weight: bold;
}
.floating + * {
  clear: left;
}

/* 属性选择器 */
div[lang] {
  color: green;
}
div:not([lang]) {
  font-style: italic;
}
div[data-lang="zh-TW"] {
  color: purple;
}
div[lang|="zh"] {
  color: red;
}
a[href^="https"][href$=".com"] {
  text-decoration: underline;
}

/* 组合符 */
img + p {
  font-weight: bold;
}
h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}
ul.my-things li {
  margin: 2em;
}

/* 伪类+伪元素 */
a:link,
a:visited {
  color: rebeccapurple;
  font-weight: bold;
}
a:hover {
  color: hotpink;
}
article p:first-child {
  font-size: 120%;
  font-weight: bold;
}
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}
.box::after {
  content: " ➥";
}

/* 多个简单选择器可连成一个 */
h1#heading {
  color: rebeccapurple;
}
li.spacious.elegant {
  margin: 2em;
}
ul > li[class="a"] {
}
a[href^="https"][href$=".com"] {
  text-decoration: underline;
}

/* 分组选择器 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}

#main,
.content,
article {
  font-size: 1.1em;
}

扩展阅读

PreviousTODO NextCSS At-rule

Last updated 1 year ago