CSS中常用的选择器使用方法有那些？_c ss选择器有哪些常用的c ss选择器的数学方法-CSDN博客

本文深入解析CSS复合选择器的使用，包括后代选择器、子选择器、并集选择器及伪类选择器的语法与应用实例。通过具体代码示范如何精确控制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS复合选择器

复合选择器就是基础选择器结合而成的
包括：后代选择器，子选择器，并集选择器，伪类选择器

后代选择器 ※

又称包含选择器，可以选择父元素里的子元素
例，选择所有ol标签里的li都更改属性

ol li {
    color: red;
    /* 选择ol里的所有li元素 */
}

中间用空格隔开
更改的是后代的 (只要是后代都可以被选中，无论几代) 样式
对同名标签的区分
- 对一个标签添加class属性
- .class属性+后代名
- 注：中间的过程标签可以省略
```
  <style>
    .nav li {
        color: pink;
    }
  </style>
  <ul class="nav">
      <li>pink</li>
  </ul>
```

子选择器

选择离得最近的子元素
元素1>元素2 {样式声明}

    <style>
      ul>li {
          color: pink;
      }
    </style>
    <ul>
        <li><a href="#">会变粉</a></li>
        <li><a href="#">不会变粉</a></li>
    </ul>

元素1是父元素，元素2是子元素
只能选择离得最近的子元素(不包括几代之后的元素)

并集选择器 ※

可以选择多组标签，样式相同，来集体声明

<style>
  div,
  p {
      color: pink;
  }
</style>
<div>会变粉</div>
<p>会变粉</p>

用逗号隔开，逗号可以理解为和的意思
任何样式选择器都可以作为并集选择器的一部分
语法规范：并集选择器的标签要竖着写

伪类选择器

给选择器添加特殊效果
语法 : + 元素

链接伪类选择器

属性	解释
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上链接
a:active	选择活动链接 (鼠标按下未抬起的链接)

小知识：未选择链接经常使用的颜色#333

链接伪类的注意事项

为了确保生效，要按照 link->visited->hover->active 的顺序声明
链接和标题标签一样，都要单独指定样式
开发中经常的写法：
- 先给a写一个样式
- 然后在给hover(经过的时候)写一个样式(蓝色+下划线)

:focus伪类选择器

选取获得焦点 (光标) 的表单元素

<style>
  input:focus {
      background-color: pink;
      /* 谁获得了光标，就改变谁的背景色 */
  }
</style>
<input type="text">
<input type="text">