CSS的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等

最新推荐文章于 2024-08-30 15:32:58 发布

奶盖不加糖

最新推荐文章于 2024-08-30 15:32:58 发布

阅读量1.8w

点赞数 17

文章标签： html css

本文链接：https://blog.csdn.net/qq_44156869/article/details/108582039

版权

CSS 专栏收录该内容

27 篇文章

订阅专栏

文章目录

- CSS复合选择器

CSS复合选择器

什么是复合选择器？

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更加准确、更高效的选择目标元素(标签)。
复合选择器是由两个或多个基础选择器，通过不同的组合而成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是外层标签写在前面，内标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1     元素2   { 样式声明 }

上述语法表示选择元素1里面的元素2 （后代元素）。

例如：

<head>
  <style>
    /*我想要把 ol 里面的小 li 选出来改为 pink*/
    ol li {
      color: pink;
    }

    /*把 链接a改为红色*/
    ol li a {
      color: red;
    }

    /*想要把第二个 ul 里面的li的链接a 变成绿色,为了区分第一个和第二ul，给第二个ul取个类名*/
    .nav li a {
      color: green;
    }
  </style>
</head>

<body>
  <ol>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>
  <ul>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
  </ul>
  <ul class="nav">
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
    <li><a href="#">不会变化</a></li>
  </ul>
</body>

元素1和元素2中间用空格隔开。
元素1是父级，元素2是子级，最终选择的是元素2。
元素2可以是，也可以是孙子等，只要元素1的后代即可。
元素1和元素2可以是任意基础选择器。

子选择器

子选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有直接后代（子元素）元素2.
例如：

div  >  p { 样式声明 } /*选择 div 里面所有最近一级 p 标签元素 */

例子：

<head>
  <style>
    .nav>a {
      color: red;
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
  </div>
</body>

元素1和元素2中间用大于号隔开。
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管。你也可以叫他亲儿子选择器。

小练习
请将下面的来链接百度两字修改为红色。(后代选择器)

<head>
  <style>
    .nav ul li a {
      color: red;
    }
  </style>
</head>

<body>
  <div class="nav">
    <ul>
      <li><a href="#">百度</a></li>
      <li><a href="#">百度</a></li>
    </ul>
  </div>
</body>

请将下面的西瓜皮改为绿色(后代选择器）

<head>
  <style>
    .watermelon>a {
      color: green;
    }
  </style>
</head>

<body>
  <div class="watermelon">
    <a href="#">西瓜皮</a>
    <ul>
      <li><a href="#">西瓜肉</a></li>
      <li><a href="#">西瓜籽</a></li>
    </ul>
  </div>
</body>

并集选择器

/font>并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各类选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 {样式声明}

上述语法表示选择元素1 和元素2.

例如：

ul,div {样式声明}  /*选择  ul 和 div标签元素*/

例子：

<head>
  <style>
    /*1.要求把熊大和熊二都改为粉色*/
    /* div,p{
      color: pink;
    }*/
    /*2.要求把熊大熊二改为粉色，还有佩奇一家改为粉色*/
    div,
    p,
    .pig li {
      color: pink;
    }

    /*语法规范，并集选择器我们喜欢竖着写，*/
    /*一定要注意最后一个选择器不需要加逗号*/
  </style>
</head>

<body>
  <div>熊大</div>
  <p>熊二</p>
  <span>光头强</span>
  <ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
  </ul>
</body>

元素1和元素2中间用逗号隔开。
逗号可以理解为和的意思。
并集选择器通常用于集体声明。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如：hover、:first-child。

因为伪类选择器很多，比如有链接伪类、结构伪类等。

链接伪类选择器

写法：

/* a是标签选择器  所有的链接*/
a  {
	color: gray;
}
/* :hove 是链接伪类选择器 鼠标经过*/
 a :hover {
	color:red; /*鼠标经过的时候，由原来的 灰色变成红色 */
}

a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被反问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/

例子：

<style>
    /* 1.未访问过的链接 a:link 把没有点击过的（访问过的）链接选出来 */
    a:link {
      color: #333;
      text-decoration: none;
    }

    /*2. a:visited 选择点击过的 （访问问过的）链接*/
    a:visited {
      color: orange;
    }
    /*变成了橙色，发现刷新也没有恢复到没有点击的状态，需要把浏览器记录清除一下*/
    
     /*3.a:hover 选择鼠标经过的那个链接*/
    a:hover {
      color:skyblue;
    }
    
    /*4.a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接*/
    a:active {
      color:green;
    }
  </style>
</head>

<body>
  <a href="#">佩奇</a>
</body>

伪类选择器的注意事项

为了确保生效，请按照LVHA的顺序声明：:link， :visited ，: hover，:active。
记忆法：love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器的中具有默认样式，所以我们在实际工作中都要给链接单独指定样式。

focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。

焦点是光标，一般情况下 <input>类表单元素才能获取到，因此这个选择器也主要针对表单元素来说。

例子：

<head>
  <style>
    input:focus {
      background-color: pink;
      /*获取光标时候的背景颜色*/
      color: red;
      /*获取光标时候的文字颜色*/
    }
  </style>
</head>

<body>
  <input type="text">
  <input type="text">
  <input type="text">
</body>

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号大于 .nav>p
并集选择器	选择某些相同的样式元素	用于集体声明	较多	符号是逗号 .nav ,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住 a {} 和 a: hover 实际开发的写法
:focus 选择器	选择获取光标的表单	跟表单相关	较少	input: focus 记住这个写法