CSS复合选择器之后代、子代、并集、链接和focus选择器

最新推荐文章于 2024-03-12 20:08:25 发布

少年深眸似海^O^

最新推荐文章于 2024-03-12 20:08:25 发布

阅读量923

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52763599/article/details/128689579

版权

CSS复合选择器

CSS 中除了一些基本的选择器，例如标签选择器、类名（class）选择器、id选择器以及通配符选择器之外，还存在一些根据CSS的嵌套关系产生的选择器。

这类根据CSS标签的嵌套关系存在的选择器分别是后代选择器、子代选择器、并集选择器、链接选择器以及focus选择器。

后代选择器

根据CSS中的嵌套关系，可以通过这个选择器选中一个标签，然后就可以在这个标签里面选择满足条件的标签，这个二次选中的标签不管嵌套的关系有几层。

例如，在标签 div 中有两个子标签，一个子标签再包含另一个子标签，这时候我们使用后代选择器直接选中所有满足选择器中的标签（只要是div的子代都将被选中），话不多说，代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS符合选择器之后代选择器</title>
    <style>
        /*我要把ol里面的li变为pink*/
        ol li{
            color: pink;
        }
        ol li a{
            color: red;
            text-decoration: none;
        }
        .nav li a{
            color: blue;
        }
    </style>
</head>
<body>
<ol>
    <li>我是ol的子代</li>
    <li>我是ol的子代</li>
    <li>我是ol的子代</li>
    <li><a href="#">我是子代的子代</a></li>
</ol>
<ul class="nav">
    <li>我是ul的子代</li>
    <li>我是ul的子代</li>
    <li>我是ul的子代</li>
    <li><a href="#">我是不会改变的</a></li>
</ul>

</body>
</html>

结果展示：

由图我们不难发现，通过ol li对整个页面的style进行修饰时，子代的li都被改变成了粉色；通过ol li a将子代的子代二点颜色改成了红色；通过.nav ol li也可以将子代和子代的子代的颜色进行改变。这也就印证了上面的话，不管你的子代有几层，只要时被选中标签的子代，都能被改变，这就是后代选择器。

子代选择器

此标签只会在父代标签中找到满足条件的子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS符合选择器之子选择器</title>
    <style>
        .nav > a {
            color: red;
        }

        /*只选择子代的元素*/
    </style>
</head>
<body>
<div class="nav">
    <a href="#">我是子代</a>
    <p>
        <a href="#">我是子代的子代</a>
    </p>
</div>
</body>
</html>

结果如下：

通过.nav > a进行修饰时，只有div标签的子代的颜色被修改成了红色，而子代的子代的颜色没有随之发生改变，这就说明了子代选择器只改变父代标签中满足条件的子代标签。

并集选择器

基本格式：选择器1,选择器2,选择器3{CSS代码}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器之并集选择器</title>
    <style>
        /*p, div {*/
        /*    color: pink;*/
        /*}*/
        p, div, .pig li {
            color: red;
        }
    </style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>
相关笔记<img src="img_1.png" width="600px">

</body>
</html>

结果如下：

由代码可以发现，为了将p,div,.pig li标签中的内容都改为粉红色，可以直接通过并集选择器将三个标签中的内容并排直接一次性改为粉红色，可以避免分开来书写CSS代码。

链接选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS符合选择器之链接伪类选择器</title>
  <style>
    a:link{
      color: #333;
      text-decoration: none;
      /*把所有未被访问过的（未点击）的链接选择出来*/
    }
    a:visited{
      color: orange;
      /*选择访问过的链接*/
    }
    a:hover{
      color: blue;
      /*选择鼠标经过的那个链接*/
    }
    a:active{
      color: green;
      /*选择的是我们鼠标正在按下还没有弹起的那个链接*/
    }
    /*注意有顺序*/

  </style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="www.badxnsjjk.com">未知的网站</a>
</body>
</html>

当链接还没有被访问（未被点击）时，链接显示如下：

链接字体为黑色，这就是a:link的作用；此时我访问（点击）小猪佩奇这个链接之后，小猪佩奇这个链接就会变成我预先设置的橙色，这就是a:active的作用，如下所示：

当我将鼠标放到其中一个链接上（不管是否被访问），链接就会显示蓝色，这就是a:hover的作用。

最后，我用鼠标点击未知的网站这个链接（鼠标点击不松开）时，链接就会显示绿色，这也就是a:active 的作用。

这里，要注意的是，这个链接伪类选择器是有顺序的，如果没有顺序有的选择方式将不会有相应的效果。

但是，实际开发中最常用的是a:hover这个连接选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS符合选择器之链接伪类选择器</title>
  <style>
      /*实际开发中最常用的：*/
      a{
        color: darkmagenta;
        text-decoration: none;
      }
      a:hover{
        color: blue;
        text-decoration: underline;
      }

  </style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="www.badxnsjjk.com">未知的网站</a>
</body>
</html>

这里的结果显示为，当我将鼠标放到链接上去时，链接会更改颜色，且显示下划线，这也就是实际开发中最常用的链接伪类选择器。

focus伪类选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器之focus伪类选择器</title>
    <style>
        input:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
<!--focus伪类选择器用于选取获得焦点的表单元素-->
<div>
    <input type="text">
    <input type="text">
    <input type="text">
</div>

</body>
</html>

结果显示如下：

当我用鼠标点击中间的表单元素时，中间的表单就变为了我预先设定的粉色，这就是focus伪类选择器。