CSS 选择器

在线学习网站

CSS Diner

基础选择器

通用选择器：选择所有元素。例如：*。
元素选择器：直接选择 HTML 标签，例如 p。
类选择器：使用 . 选择指定类名的元素，例如 .className。
ID 选择器：使用 # 选择指定 ID 的元素，例如 #idName。
属性选择器：
- [attr]：选择具有指定属性的元素。例如：[type] 选中所有有 type 属性的元素。
- [attr=value]：选择属性等于指定值的元素。例如：[type="text"] 只选中 type="text" 的元素。
- [attr~=value]：选择属性值为以空格分隔的词列表，并且其中之一等于指定值。常用于 class。例如：[class~="button"] 选中 class="btn button primary" 这样的元素。
- [attr^=value]：选择属性值以指定值开头的元素。例如：[src^="https"] 选中所有图片地址以 https 开头的元素。
- [attr$=value]：选择属性值以指定值结尾的元素。例如：[src$=".jpg"] 选中所有图片地址以 .jpg 结尾的元素。
- [attr*=value]：选择属性值中包含指定值的元素（不分隔符）。例如：[title*="hello"] 选中所有 title 属性中有 hello 的元素。
- [attr|=value]：选择属性值等于指定值或以“指定值-”开头的元素。常用于语言（如 lang）。例如：[lang|="en"] 会选中 lang="en" 和 lang="en-US"。

分组选择器

A, B

组合选择器

后代选择器：选择某个元素内部的所有指定元素，用空格分隔，例如 div p 选择所有位于 div 内的 p。
直接子代选择器：选择某个元素的直接子元素，用 > 分隔，例如 ul > li 选择所有位于 ul 直接下的 li。
一般兄弟选择器：选择位于另一个元素之后的所有兄弟元素，用 ~ 分隔，例如 h1 ~ p 选择所有在 h1 之后的 p。
紧凑兄弟选择器：选择紧接在另一个元素之后的元素，用 + 分隔，例如 h1 + p 选择紧接在 h1 之后的第一个 p。
列组合器：A || B

伪选择器

动态伪类：

:hover：当用户将鼠标悬停在元素上时生效，常用于按钮或链接的交互效果。
:active：当用户点击并按住元素时生效，通常用于按钮或链接的按压效果。
:focus：当元素获得焦点时生效（如用户点击输入框或使用键盘导航到某个可聚焦元素）。
:focus-visible：元素获得焦点且浏览器判断应显示焦点提示时生效，通常用于保留键盘操作的焦点样式，避免鼠标点击也出现焦点轮廓。
:focus-within：当某个元素本身或其子元素获得焦点时生效，适合用于父级元素的样式更新。

css

/* 不移除焦点提示；仅在适合时显示自定义样式 */
.input:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}

.field:focus-within {
  border-color: #1677ff;
}

子元素选择伪类：

:nth-child(n)：选择父元素中第 n 个子元素，n 可以是数字、odd（奇数）、even（偶数），或一个公式（如 2n+1）。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-of-type(n)：选择父元素中第 n 个指定类型（如 <div> 或 <p>）的子元素。
:first-of-type：选择父元素中第一个指定类型的子元素。
:last-of-type：选择父元素中最后一个指定类型的子元素。

`:nth-child()` 与 `:nth-of-type()`

:nth-child() 按元素在全部同级元素中的位置匹配，再判断它是否符合前面的选择器。
:nth-of-type() 只计算同标签名元素中的位置。

html

<div class="list">
  <p>说明</p>
  <div>第一个 div</div>
  <div>第二个 div</div>
</div>

css

.list div:nth-child(odd) {
  /* 不匹配：两个 div 分别是第 2、3 个子元素，只有第二个是奇数位 */
}

.list div:nth-of-type(odd) {
  /* 匹配第一个 div：它是第 1 个 div */
}

伪元素：

::before / ::after：用于在元素内容之前或之后插入内容。
::first-line / ::first-letter：用于选择元素的首行或首字母。

其他：

:not(selector)：匹配不符合 selector 的元素，适用于排除某些样式。
:invalid：匹配无效的表单输入元素（根据 type、pattern 或 required 等属性）。
:lang：根据元素的语言属性（lang 或 xml:lang）匹配特定语言的内容。
:where(selector)：匹配 selector 中指定的元素，优先级始终为零，适用于降低冲突风险或编写默认样式。
:is(selector)：匹配 selector 中指定的元素，优先级由匹配的内部选择器决定，适用于优化选择器编写。

CSS 选择器 ​

基础选择器 ​

分组选择器 ​

组合选择器 ​

伪选择器 ​

:nth-child() 与 :nth-of-type() ​

CSS 选择器

基础选择器

分组选择器

组合选择器

伪选择器

`:nth-child()` 与 `:nth-of-type()`