CSS3伪类选择器详细介绍

CSS3 引入了许多新的伪类选择器，这些选择器允许开发者根据元素的状态或特征来应用样式。以下是 CSS3 新增的一些重要伪类选择器的详细介绍：

目录

1. :nth-child()

2. :nth-of-type()

3. :first-child

4. :last-child

5. :first-of-type

6. :last-of-type

7. :not(selector)

8. :enabled 和 :disabled

9. :checked

10. :active、:focus 和 :hover

11. :lang(language)

12. 行内块元素的选择

---

1. :nth-child()

• 描述：选择父元素下的第 n 个子元素，可使用数字、关键字和公式。
• 语法：:nth-child(n)，n 可以是数字、关键字 even、odd，或公式 an + b。
• 示例：

  /* 选择每个第三个子元素 */
  li:nth-child(3) {
      background-color: yellow;
  }
  
  /* 选择偶数子元素 */
  li:nth-child(even) {
      background-color: lightblue;
  }
  
  /* 选择奇数子元素 */
  li:nth-child(odd) {
      background-color: lightgreen;
  }
  
  /* 选择从第 2 个开始每隔 3 个元素 */
  li:nth-child(3n + 2) {
      background-color: coral;
  }
  

2. :nth-of-type()

• 描述：选择同类型的元素下的第 n 个元素。
• 语法：:nth-of-type(n)。
• 示例：

  /* 选择每个第二个 <p> 元素 */
  p:nth-of-type(2) {
      color: red;
  }
  
  /* 选择每个第三个 <h2> 元素 */
  h2:nth-of-type(3) {
      color: blue;
  }
  

3. :first-child

• 描述：选择父元素下的第一个子元素。
• 语法：:first-child。
• 示例：

  /* 选择每个列表的第一个子元素 */
  ul li:first-child {
      font-weight: bold;
  }
  

4. :last-child

• 描述：选择父元素下的最后一个子元素。
• 语法：:last-child。
• 示例：

  /* 选择每个列表的最后一个子元素 */
  ul li:last-child {
      color: green;
  }
  

5. :first-of-type

• 描述：选择父元素下某类型元素的第一个子元素。
• 语法：:first-of-type。
• 示例：

  /* 选择每个列表中的第一个 <li> 元素 */
  li:first-of-type {
      font-size: 20px;
  }
  

6. :last-of-type

• 描述：选择父元素下某类型元素的最后一个子元素。
• 语法：:last-of-type。
• 示例：

  /* 选择每个列表中的最后一个 <li> 元素 */
  li:last-of-type {
      font-size: 20px;
  }
  

7. :not(selector)

• 描述：选择不匹配指定选择器的元素。
• 语法：:not(selector)。
• 示例：

  /* 选择所有 <p> 元素，但不包括带有 .special 类的元素 */
  p:not(.special) {
      color: gray;
  }
  

8. :enabled 和 :disabled

• 描述：选择表单中可用或不可用的输入元素。
• 语法：:enabled 和 :disabled。
• 示例：

  /* 选择所有可用的输入框 */
  input:enabled {
      background-color: white;
  }
  
  /* 选择所有禁用的输入框 */
  input:disabled {
      background-color: lightgray;
  }
  

9. :checked

• 描述：选择所有被选中的 <input> 元素，如复选框或单选框。
• 语法：:checked。
• 示例：

  /* 选择所有被选中的复选框 */
  input[type="checkbox"]:checked {
      outline: 2px solid blue;
  }
  

10. :active、:focus 和 :hover

• 描述：
  • :active：选择当前正在被激活的元素（例如被点击的链接）。
  • :focus：选择当前获得焦点的元素（如输入框）。
  • :hover：选择鼠标悬停的元素。
• 语法：:active、:focus、:hover。
• 示例：

  /* 鼠标悬停时改变颜色 */
  a:hover {
      color: red;
  }
  
  /* 输入框获得焦点时 */
  input:focus {
      border: 2px solid blue;
  }
  
  /* 链接被点击时 */
  a:active {
      color: green;
  }
  

11. :lang(language)

• 描述：选择特定语言的元素。
• 语法：:lang(language)。
• 示例：

  /* 选择语言为中文的元素 */
  :lang(zh) {
      font-family: 'Noto Sans CJK SC', sans-serif;
  }
  

12. 行内块元素的选择

• 描述：新的选择器可以针对行内块元素。
• 示例：

  /* 选择所有行内块元素 */
  span {
      display: inline-block;
      padding: 10px;
  }
  

这些新增的伪类选择器使得 CSS 更加灵活和强大，可以根据不同的条件和状态来应用样式，极大地提高了网页设计的便利性和表现力。通过适当使用这些选择器，开发者可以实现更复杂的样式效果，无需依赖 JavaScript。