我的日常开发记录日志
窝窝侠
2024-11-01

伪类选择器

# 在 CSS 中，有多种伪类选择器可以用来选择特定的元素。以下是常用的伪类选择器的完整列表，

# 1. 结构性伪类选择器

  • :first-child: 选择父元素的第一个子元素。
  • :last-child: 选择父元素的最后一个子元素。
  • :nth-child(n): 选择父元素的第 n 个子元素。
  • :nth-last-child(n): 选择父元素的倒数第 n 个子元素。
  • :nth-of-type(n): 选择父元素下特定类型的第 n 个子元素。
  • :nth-last-of-type(n): 选择父元素下特定类型的倒数第 n 个子元素。
  • :first-of-type: 选择父元素下特定类型的第一个子元素。
  • :last-of-type: 选择父元素下特定类型的最后一个子元素。
  • :only-child: 选择父元素唯一的子元素。
  • :only-of-type: 选择父元素下唯一指定类型的子元素。
  • :empty: 选择没有子元素（包括文本节点）的元素。

# 2. 状态伪类选择器

  • :hover: 选择当鼠标悬停在元素上时的样式。
  • :active: 选择当元素被激活（如点击）时的样式。
  • :focus: 选择当元素获得焦点时的样式（例如输入框）。
  • :focus-within: 选择当元素或其子元素获得焦点时的样式。
  • :focus-visible: 选择当元素获得焦点且可见的样式（通常与键盘导航有关）。
  • :disabled: 选择禁用的表单元素。
  • :enabled: 选择启用的表单元素。
  • :checked: 选择被选中的复选框或单选按钮。
  • :indeterminate: 选择状态不确定的复选框（通常用于部分选中状态）。

# 3. 其他伪类选择器

  • :not(selector): 选择不匹配给定选择器的元素。
  • :nth-match(n): 选择与选择器匹配的第 n 个元素（CSS4）。
  • :nth-last-match(n): 选择与选择器匹配的倒数第 n 个元素（CSS4）。
  • :dir(): 选择具有特定文本方向的元素（如 :dir(ltr)）。
  • :lang(language): 选择具有特定语言属性的元素（如 :lang(en)）。

# 4. 伪元素选择器

虽然伪元素选择器不是伪类选择器，但它们也值得一提。伪元素用于选择元素的某些部分。

  • ::before: 在元素内容前插入内容。
  • ::after: 在元素内容后插入内容。
  • ::first-line: 选择元素的第一行文本。
  • ::first-letter: 选择元素的第一个字母。
  • ::placeholder: 选择输入框的占位符文本。

# 使用案例

# :first-child

  • 场景: 为父元素的第一个子元素添加样式。
ul li:first-child {
    font-weight: bold;  /* 第一个列表项加粗 */
}
1
2
3

# :last-child

  • 场景: 为父元素的最后一个子元素添加样式。
ul li:last-child {
    color: red;  /* 最后一个列表项变红 */
}
1
2
3

# :nth-child(n)

  • 场景: 为特定的 n 个子元素应用样式。
li:nth-child(3) {
    background-color: #f0f0f0;  /* 选择第三个列表项 */
}

li:nth-child(2n) {
    background-color: #e0e0e0;  /* 所有偶数项 */
}
1
2
3
4
5
6
7

# :nth-last-child(n)

  • 场景: 为倒数第 n 个子元素应用样式。
li:nth-last-child(1) {
    font-style: italic;  /* 选择最后一个列表项 */
}
1
2
3

# :nth-of-type(n)

  • 场景: 为特定类型的第 n 个子元素应用样式。
div p:nth-of-type(2) {
    color: blue;  /* 选择第二个 <p> 元素 */
}
1
2
3

# :nth-last-of-type(n)

  • 场景: 为特定类型的倒数第 n 个子元素应用样式。
div p:nth-last-of-type(1) {
    font-size: 20px;  /* 选择最后一个 <p> 元素 */
}
1
2
3

# :first-of-type

  • 场景: 为父元素下特定类型的第一个子元素添加样式。
div p:first-of-type {
    text-decoration: underline;  /* 第一个 <p> 下划线 */
}
1
2
3

# :last-of-type

  • 场景: 为父元素下特定类型的最后一个子元素添加样式。
div p:last-of-type {
    text-align: right;  /* 最后一个 <p> 右对齐 */
}
1
2
3

# :only-child

  • 场景: 为唯一子元素提供样式。
div:only-child {
    border: 1px solid #ccc;  /* 唯一子元素添加边框 */
}
1
2
3

# :only-of-type

  • 场景: 为父元素下唯一指定类型的子元素提供样式。
div p:only-of-type {
    font-weight: bold;  /* 唯一 <p> 元素加粗 */
}
1
2
3

# :empty

  • 场景: 隐藏没有任何内容的元素。
p:empty {
    display: none;  /* 隐藏空段落 */
}
1
2
3

# 2. 状态伪类选择器

# :hover

  • 场景: 当鼠标悬停在元素上时应用样式。
button:hover {
    background-color: #0056b3;  /* 鼠标悬停时背景色改变 */
}
1
2
3

# :active

  • 场景: 当元素被点击时应用样式。
button:active {
    transform: scale(0.95);  /* 点击时缩小 */
}
1
2
3

# :focus

  • 场景: 当元素获得焦点时应用样式。
input:focus {
    border: 2px solid #007BFF;  /* 聚焦输入框边框颜色 */
}
1
2
3

# :focus-within

  • 场景: 当元素或其子元素获得焦点时应用样式。
.form-group:focus-within {
    border: 2px solid #007BFF;  /* 当输入框聚焦时，为父元素添加样式 */
}
1
2
3

# :focus-visible

  • 场景: 仅在元素可见的情况下获得焦点样式。
button:focus-visible {
    outline: 3px solid #007BFF;  /* 仅在可见时应用轮廓 */
}
1
2
3

# :disabled

  • 场景: 为禁用的表单元素提供样式。
input:disabled {
    background-color: #e9ecef;  /* 禁用输入框的背景颜色 */
}
1
2
3

# :enabled

  • 场景: 为启用的表单元素提供样式。
input:enabled {
    background-color: #ffffff;  /* 启用输入框的背景颜色 */
}
1
2
3

# :checked

  • 场景: 为选中的复选框或单选按钮添加样式。
input[type="checkbox"]:checked {
    accent-color: #007BFF;  /* 选中复选框的颜色 */
}
1
2
3

# :indeterminate

  • 场景: 为状态不确定的复选框添加样式。
input[type="checkbox"]:indeterminate {
    background-color: #f0f0f0;  /* 状态不确定的复选框背景颜色 */
}
1
2
3

# 3. 其他伪类选择器

# :not(selector)

  • 场景: 选择不匹配特定选择器的元素。
button:not(.excluded) {
    background-color: #007BFF;  /* 选择所有按钮，但排除某些按钮 */
}
1
2
3

# :nth-match(n)

  • 场景: 选择与选择器匹配的第 n 个元素（CSS4）。
p:nth-match(2n) {
    color: green;  /* 选择所有匹配的偶数段落 */
}
1
2
3

# :nth-last-match(n)

  • 场景: 选择与选择器匹配的倒数第 n 个元素（CSS4）。
p:nth-last-match(1) {
    font-weight: bold;  /* 选择最后一个匹配的段落 */
}
1
2
3

# :dir()

  • 场景: 选择具有特定文本方向的元素。
:dir(ltr) {
    text-align: left;  /* 从左到右的文本方向 */
}
1
2
3

# :lang(language)

  • 场景: 选择具有特定语言属性的元素。
:lang(en) {
    font-family: "Arial";  /* 英语文本使用 Arial 字体 */
}
1
2
3

# 4. 伪元素选择器

# ::before

  • 场景: 在元素内容前插入内容。
h2::before {
    content: "★";  /* 在标题前添加星星符号 */
}
1
2
3

# ::after

  • 场景: 在元素内容后插入内容。
h2::after {
    content: "☆";  /* 在标题后添加星星符号 */
}
1
2
3

# ::first-line

  • 场景: 选择元素的第一行文本。
p::first-line {
    font-weight: bold;  /* 第一行文本加粗 */
}
1
2
3

# ::first-letter

  • 场景: 选择元素的第一个字母。
p::first-letter {
    font-size: 2em;  /* 第一个字母放大 */
}
1
2
3

# ::placeholder

  • 场景: 选择输入框的占位符文本。
input::placeholder {
    color: #999;  /* 占位符文本为灰色 */
}
1
2
3

# :nth-child() 选择器确实不允许直接根据元素类型来进行选择。它是根据父元素的所有子元素的顺序来选择的，而不关心子元素的类型。换句话说，:nth-child() 选择的是所有类型的子元素的第 n 个元素。

# 1. :nth-child() 的使用

  • :nth-child(n) 可以选择第 n 个子元素，但这个 n 是相对于所有子元素的，不仅限于某一特定类型。

# 示例：

<div>
    <p>Paragraph 1</p>
    <span>Span 1</span>
    <p>Paragraph 2</p>
    <span>Span 2</span>
    <p>Paragraph 3</p>
</div>
1
2
3
4
5
6
7

如果你使用 div :nth-child(3)，它会选择 div 的第三个子元素，这里是 Paragraph 2（第一个 <p> 和第一个 <span> 计入总数）。

# 2. 选择特定类型的元素

如果你想选择特定类型的元素（比如只选择 <p>），需要使用 :nth-of-type()。这个选择器会根据特定类型的子元素顺序进行选择。

# 示例：

/* 选择第二个 <p> 元素 */
div p:nth-of-type(2) {
    color: blue; /* 这会选择 "Paragraph 2" */
}
1
2
3
4

# 3. 结合使用

尽管 :nth-child() 不能直接加类型，但你可以结合使用，如下所示：

/* 选择 div 中的第 2 个 <p> 元素 */
div p:nth-child(2) {
    color: red; /* 这不会选择任何东西，因为第 2 个子元素是 <span> */
}

/* 选择 div 中的第 2 个子类型为 <p> 的元素 */
div p:nth-of-type(2) {
    color: blue; /* 这会选择 "Paragraph 2" */
}
1
2
3
4
5
6
7
8
9

# 总结

  • :nth-child(n) 选择的是父元素下的第 n 个子元素，无论其类型。
  • :nth-of-type(n) 选择的是父元素下的特定类型的第 n 个子元素，仅计算该类型的元素。

如果你需要根据特定类型进行选择，使用 :nth-of-type() 是更合适的选择。

在线编辑 (opens new window)
上次更新: 2025/02/25, 18:30:54
css动画
优化input显示

← 优化input显示→

最近更新
01
showprocess用法
 04-29
02
vue3中尖括号和冒号的使用细则
 04-29
03
sd使用
 02-22
更多文章>
🖥️

© 2025窝窝侠 💌 豫ICP备20005263号-2 🛀 Theme by 💝 Vdoing && 小胖墩er

×