CSS3选择器使用指南

CSS3选择器是一种强大的工具，它允许你根据HTML元素的属性、结构和状态来定位和样式化元素。以下是一些常用的CSS3选择器及其使用方法：

1. 基本选择器

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

  p {
    color: red;
  }
  

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

  .classname {
    font-weight: bold;
  }
  

• ID选择器：通过ID选择元素。

  #idname {
    background-color: yellow;
  }
  

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

  * {
    margin: 0;
    padding: 0;
  }
  

2. 属性选择器

• 存在属性选择器：选择具有某个属性的元素。

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

• 等于属性值选择器：选择属性值等于指定值的元素。

  [type="text"] {
    background-color: lightblue;
  }
  

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

  [type*="text"] {
    font-style: italic;
  }
  

• 以指定值开头选择器：选择属性值以指定字符串开头的元素。

  [type^="submit"] {
    color: green;
  }
  

• 以指定值结尾选择器：选择属性值以指定字符串结尾的元素。

  [type$="button"] {
    font-weight: bold;
  }
  

3. 结构选择器

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

  div p {
    color: blue;
  }
  

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

  div > p {
    color: red;
  }
  

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

  h1 + p {
    font-size: 20px;
  }
  

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

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

4. 伪类选择器

• 链接伪类：选择不同状态的链接。

  a:link { /* 未访问的链接 */ }
  a:visited { /* 已访问的链接 */ }
  a:hover { /* 鼠标悬停时的链接 */ }
  a:active { /* 被点击的链接 */ }
  

• 表单伪类：选择表单元素的不同状态。

  input:focus { /* 获得焦点的输入框 */ }
  input:invalid { /* 无效的输入框 */ }
  

• 结构伪类：选择文档树中的特定部分。

  :first-child { /* 第一个子元素 */ }
  :last-child { /* 最后一个子元素 */ }
  :nth-child(n) { /* 第n个子元素 */ }
  :nth-of-type(n) { /* 第n个特定类型的子元素 */ }
  

5. 伪元素选择器

• 插入内容：在元素的内容前后插入内容。

  p::before { content: "Note: "; }
  p::after { content: "."; }
  

• 选择首字母和首行：

  p::first-letter { font-size: 200%; }
  p::first-line { line-height: 1.5; }
  

6. 组合选择器

• 后代组合选择器：结合后代选择器和基本选择器。

  div p {
    color: blue;
  }
  

• 子组合选择器：结合子选择器和基本选择器。

  div > p {
    color: red;
  }
  

• 相邻兄弟组合选择器：结合相邻兄弟选择器和基本选择器。

  h1 + p {
    font-size: 20px;
  }
  

• 通用兄弟组合选择器：结合通用兄弟选择器和基本选择器。

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

7. 属性值选择器

• 等于属性值选择器：选择属性值等于指定值的元素。

  [type="text"] {
    background-color: lightblue;
  }
  

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

  [type*="text"] {
    font-style: italic;
  }
  

• 以指定值开头选择器：选择属性值以指定字符串开头的元素。

  [type^="submit"] {
    color: green;
  }
  

• 以指定值结尾选择器：选择属性值以指定字符串结尾的元素。

  [type$="button"] {
    font-weight: bold;
  }
  

8. 伪类和伪元素的组合

• 伪类和伪元素的组合：结合伪类和伪元素选择器。

  a:hover::after {
    content: " (visited)";
  }
  

注意事项

• 选择器的优先级：ID选择器 > 类选择器/属性选择器 > 标签选择器。
• 使用组合选择器时，要注意选择器的顺序和嵌套关系。
• 伪类和伪元素的选择器可以嵌套在其他选择器中使用。

通过熟练掌握这些选择器，你可以更精确地控制网页的样式和布局。