CSS3 属性/伪类/伪元素选择器详解示例属性选择器：当你想要根据元素的属性值选择特定元素并为其应用样式时。伪类选

属性选择器：当你想要根据元素的属性值选择特定元素并为其应用样式时。

常见的属性选择器包括：
- [attr]：选择具有指定属性的元素。
- [attr=value]：选择属性值等于给定值的元素。
- [attr~=value]：选择属性值包含指定词汇的元素。
- [attr|=value]：选择属性值以给定值开头，后面跟着一个连字符或是以给定值开头的元素。
- [attr^=value]、[attr$=value]、[attr*=value]：分别选择属性值以给定值开头、以给定值结尾、包含给定值的元素。

举例：

选择具有指定属性的元素 [attr]：

cssCopy Code
/* 选择所有具有 title 属性的元素，并设置它们的颜色为红色 */
[title] {
    color: red;
}

选择属性值等于给定值的元素** [attr=value]：

cssCopy Code
/* 选择所有 class 属性值为 "button" 的元素，并设置它们的背景颜色为蓝色 */
[class=button] {
    background-color: blue;
}

选择属性值包含指定词汇的元素** [attr~=value]：

cssCopy Code
/* 选择所有具有 class 属性值包含 "important" 的元素，并设置它们的字体为粗体 */
[class~=important] {
    font-weight: bold;
}

选择属性值以给定值开头的元素** [attr|=value]：

cssCopy Code
/* 选择所有 lang 属性值以 "en" 开头的元素，并设置它们的颜色为蓝色 */
[lang|=en] {
    color: blue;
}

选择属性值以给定值开头、以给定值结尾、包含给定值的元素** [attr^=value]、[attr$=value]、[attr*=value]：

cssCopy Code
/* 选择所有 href 属性值以 "https://" 开头的元素，并设置它们的颜色为绿色 */
[href^="https://"] {
    color: green;
}

/* 选择所有 src 属性值以 ".png" 结尾的元素，并设置它们的边框为1px实线红色 */
[src$=".png"] {
    border: 1px solid red;
}

/* 选择所有 alt 属性值包含 "logo" 的元素，并设置它们的背景为灰色 */
[alt*="logo"] {
    background-color: grey;
}

伪类选择器：用于选择处于特定状态的元素，例如鼠标悬停在元素上、元素处于被选中状态等。
- 一些常见的伪类选择器包括：
  - :hover：选择鼠标悬停在元素上的状态。
  - :focus：选择获取焦点的元素。
  - :active：选择被激活的元素（例如，点击按钮时）。
  - :first-child、:last-child、:nth-child()：分别选择第一个子元素、最后一个子元素、指定位置的子元素等。
- 举例：
  - :hover 伪类：选择鼠标悬停在元素上的状态。
```
  /* 将链接在鼠标悬停时文本颜色设为红色 */
  a:hover {
      color: red;
  }
```
  - :active 伪类：选择处于活动状态的元素，通常在用户点击元素但尚未释放鼠标按钮时。
```
cssCopy Code
/* 将按钮在被点击时背景颜色设为灰色 */
button:active {
    background-color: grey;
}
```
  - :focus 伪类：选择当前获取焦点的元素，通常适用于表单元素等。
```
cssCopy Code
/* 当输入框获取焦点时设置边框颜色为蓝色 */
input:focus {
    border-color: blue;
}
```
  - :checked 伪类：选择被选中的复选框或单选按钮。
```
cssCopy Code
/* 选择被选中的复选框并设置样式 */
input[type="checkbox"]:checked {
    background-color: yellow;
}
```
  - :nth-child 伪类：选择父元素的第 N 个子元素。
```
cssCopy Code
/* 选择列表的奇数项并设置样式 */
ul li:nth-child(odd) {
    background-color: lightgrey;
}
```
  - :nth-of-type 伪类：选择父元素中特定类型的第 N 个子元素。
```
cssCopy Code
/* 选择段落中的第二个段落并设置样式 */
p:nth-of-type(2) {
    font-style: italic;
}
```
伪元素选择器：用于选择元素的特定部分，例如元素的第一行、第一个字母等。
- 常见的伪元素选择器包括：
  - ::before：在元素内部的内容前面插入生成的内容。
  - ::after：在元素内部的内容后面插入生成的内容。
  - ::first-line：选择元素的第一行文本。
  - ::first-letter：选择元素的第一个字母。
- 举例：
  - ::first-line 伪元素：选择元素的第一行文本。
```
cssCopy Code
/* 设置段落的第一行文本样式 */
p::first-line {
    font-weight: bold;
}
```
  - ::first-letter 伪元素：选择元素的第一个字母。
```
cssCopy Code
/* 设置段落的第一个字母样式 */
p::first-letter {
    font-size: 150%;
}
```
  - ::before 伪元素：在元素内容之前插入内容。
```
cssCopy Code
/* 在每个段落前插入内容 */
p::before {
    content: "【开始】";
}
```
  - ::after 伪元素：在元素内容之后插入内容。
```
cssCopy Code
/* 在每个段落后插入内容 */
p::after {
    content: "【结束】";
}
```
  - ::selection 伪元素：选择用户选中的文本部分。
```
cssCopy Code
/* 设置用户选中的文本背景颜色 */
::selection {
    background-color: yellow;
}
```
  - ::placeholder 伪元素：选择输入框的占位符文本。
```
cssCopy Code
/* 设置输入框的占位符文本样式 */
input::placeholder {
    color: grey;
}
```
这些是一些常见的伪元素选择器及其示例，它们允许你针对元素的特定部分进行样式设置或插入内容。

CSS3 属性/伪类/伪元素选择器 详解示例

CSS3 属性/伪类/伪元素选择器详解示例