CSS3选择器如何使用

CSS3选择器用于在HTML文档中选取元素，并为这些元素应用样式。CSS3选择器比CSS2选择器更加强大和灵活，允许开发者以更精确的方式选取元素。以下是一些常用的CSS3选择器及其用法：

1. 基本选择器

• 元素选择器：通过标签名选取元素。

  p {
    color: red;
  }
  

• 类选择器：通过类名选取元素。

  .classname {
    font-weight: bold;
  }
  

• ID选择器：通过ID选取单个元素。

  #idname {
    background-color: yellow;
  }
  

2. 属性选择器

• 属性存在选择器：选取具有特定属性的元素。

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

• 属性值选择器：选取具有特定属性值的元素。

  [href^="https://"] {
    color: blue;
  }
  

• 属性值包含选择器：选取属性值中包含特定字符串的元素。

  [title*="example"] {
    font-style: italic;
  }
  

• 属性值结束选择器：选取属性值以特定字符串结束的元素。

  [href$=".pdf"] {
    background-color: lightgray;
  }
  

3. 伪类选择器

• 结构伪类：基于元素在文档流中的位置选取元素。

  p:first-child {
    font-size: 18px;
  }
  p:last-child {
    font-size: 16px;
  }
  

• 状态伪类：基于元素的状态选取元素。

  a:hover {
    color: green;
  }
  input:focus {
    border: 2px solid red;
  }
  

• 表单相关伪类：选取表单元素的不同状态。

  input:valid {
    border-color: green;
  }
  input:invalid {
    border-color: red;
  }
  

4. 伪元素选择器

• 内容前伪元素：选取元素内容前的部分。

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

• 内容后伪元素：选取元素内容后的部分。

  p::after {
    content: ".";
    color: red;
  }
  

5. 组合选择器

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

  div p {
    font-size: 14px;
  }
  

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

  div > p {
    font-size: 14px;
  }
  

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

  h1 + p {
    font-weight: bold;
  }
  

• 通用兄弟选择器：选取某个元素后的所有兄弟元素。

  h1 ~ p {
    font-size: 14px;
  }
  

6. 通配符选择器

• 通配符选择器：选取所有元素。

  * {
    margin: 0;
    padding: 0;
  }
  

7. 否定伪类选择器

• 否定伪类选择器：选取不具有特定类的元素。

  p:not(.classname) {
    color: black;
  }
  

通过这些选择器，你可以精确地控制HTML文档中元素的样式，实现复杂的布局和设计效果。