CSS3选择器有哪些高效用法

CSS3选择器提供了多种高效用法，可以帮助开发者更精确地定位和样式化HTML元素。以下是一些常用的CSS3选择器及其高效用法：

1. 类选择器和ID选择器

• 类选择器：使用.来定义，可以应用于多个元素。

  .example {
    color: blue;
  }
  

• ID选择器：使用#来定义，每个ID在文档中必须是唯一的。

  #header {
    background-color: #f0f0f0;
  }
  

2. 属性选择器

• 存在属性选择器：检查元素是否具有某个属性。

  [data-active] {
    background-color: yellow;
  }
  

• 属性值选择器：检查元素的某个属性是否具有特定的值。

  [type="text"] {
    border: 1px solid black;
  }
  

3. 伪类选择器

• :hover：当鼠标悬停在元素上时应用样式。

  a:hover {
    color: red;
  }
  

• :nth-child()：选择父元素的特定子元素。

  li:nth-child(odd) {
    background-color: lightgray;
  }
  

• :last-child：选择父元素的最后一个子元素。

  p:last-child {
    font-weight: bold;
  }
  

4. 伪元素选择器

• ::before 和 ::after：在元素的内容前或后插入内容。

  p::before {
    content: "Note: ";
    color: blue;
  }
  

5. 组合选择器

• 后代选择器：选择一个元素的后代元素。

  div p {
    font-size: 14px;
  }
  

• 子选择器：选择一个元素的直接子元素。

  ul > li {
    list-style-type: square;
  }
  

• 相邻兄弟选择器：选择紧接在另一个元素后的元素。

  h1 + p {
    font-weight: bold;
  }
  

• 通用兄弟选择器：选择在另一个元素后的所有兄弟元素。

  h1 ~ p {
    margin-left: 20px;
  }
  

6. 结构伪类选择器

• :first-of-type：选择同类型中的第一个元素。

  p:first-of-type {
    font-weight: bold;
  }
  

• :last-of-type：选择同类型中的最后一个元素。

  p:last-of-type {
    font-style: italic;
  }
  

7. UI状态伪类选择器

• :focus：当元素获得焦点时应用样式。

  input:focus {
    border-color: green;
  }
  

• :disabled 和 :enabled：选择禁用或启用的元素。

  button:disabled {
    opacity: 0.5;
  }
  

8. 目标伪类选择器

• :target：当URL的片段标识符匹配元素的ID时应用样式。

  #section1:target {
    background-color: lightblue;
  }
  

9. 否定伪类选择器

• :not()：排除某些元素。

  div:not(.example) {
    border: 2px solid red;
  }
  

10. :lang()伪类选择器

• :lang()：选择具有特定语言属性的元素。

  p:lang(en) {
    font-family: Arial, sans-serif;
  }
  

通过合理使用这些选择器，可以大大提高CSS的灵活性和效率，减少冗余代码，使样式表更加简洁和易于维护。