CSS 选择器

前言

---

基础选择器

以下是几种常见的基础选择器。

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

例如：

p {
    color: red;
}

上述样式规则将选择所有

标签 ，并将其文字颜色设置为红色。

---

类选择器：通过类名选择元素。使用类选择器时需要在类名前加上英文句点.。

例如：

这是p标签。

.myp {
    font: size 16px;
}

上述样式规则将选择所有具有class="myp"属性的元素。并将它们的字体大小设置为16像素。

---

ID选择器：通过元素的唯一ID选择元素。使用ID选择器时，在CSS中需要在ID名称前加上井号#。

例如：

这是一个div元素。

#mydiv {
    background-color: blue;
}

上述样式规则将选择具有id="mydiv" 的元素，并将它们的背景颜色设置为蓝色。

---

复合选择器

复合选择器是由多个基础选择器通过不同的方式组合而成的，用于更精确地选择目标元素。

后代选择器

后代选择器用于选择某个元素的后代元素。父子选择器之间用空格隔开。

语法：

父选择器 子选择器 {
    /* 样式规则 */
}

示例：

选择

元素内部所有的

元素。

div p {
    /* 样式规则 */
}

后代选择器支持多级嵌套，即可以选择更深层次的后代元素。例如：

选择

元素内部的

元素，再选择其中的
• 元素，最后选择
• 元素内部的元素。

  div ul li a {
      /* 样式规则 */
  }

   通过合理运用后代选择器，你可以针对特定的HTML结构来选择需要应用样式的元素，实现更精确的样式控制。

  ---

  子代选择器

  子代选择器用于选择某个元素的直接子元素。父子选择器之间用 > 符号隔开。

  语法：

  父选择器 > 子选择器 {
      /* 样式规则 */
  }

  示例：

  选择

  元素下直接的所有

  元素。

  div > p {
      /* 样式规则 */
  }

  相比于后代选择器，子代选择器的作用范围更加精确，只选择直接子元素，不包括孙子元素及以下元素。

  ---

  并集选择器

  并集选择器用于同时选择多个不同类型的元素或相同类型的元素。选择器之间用 , 隔开。

  语法：

  选择器1, 选择器2, 选择器3 {
      /* 样式规则 */
  }

  示例：

  同时选择

  和

  元素。

  h1, h2 {
      /* 样式规则 */
  }

  通过合理运用并集选择器，你可以灵活地选择多个元素，并对它们进行统一的样式设置，实现样式的复用和统一管理。

  ---

  伪类选择器-超链接

  在CSS中，可以使用伪类选择器为超链接元素（标签）应用不同的样式。以下是几个常用的超链接伪类选择器：

  选择器	作用
  :link	匹配未访问的连接状态
  :visited	匹配已访问的链接状态
  :hover	匹配鼠标悬停在链接上的状态
  :active	匹配被激活（点击）的状态

  示例：

  a:link {
      color: blue;
  }
  
  a:visited {
      color: purple;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  a:active {
      color: red;
  }

  上述代码中，:link 选择器设置未访问的链接为蓝色，:visited 选择器设置已访问的链接为紫色，:hover 选择器在鼠标悬停时添加下划线，:active 选择器在被点击时将链接颜色设为红色。

  需要注意的是，在设置超链接的颜色时，应该按照 :link、:visited、:hover、:active 的顺序进行设置，以确保样式生效。