CSS---复合选择器

稻子永不倒

已于 2022-11-20 22:58:21 修改

阅读量1.8k

点赞数 1

分类专栏： Web前端技术文章标签： css 前端 html

于 2022-11-20 22:53:14 首次发布

本文链接：https://blog.csdn.net/gaoqiandr/article/details/127955515

版权

Web前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一：复合选择器的介绍

前面介绍了基础选择器，那什么是复合选择器呢？复合选择器是建立在基础选择器的基础上对目标元素进行更准确更高效的选择，常用的复合选择器有：后代选择器，子选择器，并集选择器，伪类选择器等等。本文就对这四种复合选择器进行讲解介绍。

二、复合选择器的讲解

（1）后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。当然不仅仅是子元素，孙子元素也可以，只要是它的后代元素就可以。

ul li {

}
选择的<ul>标签中的<li>标签

出现多个标签，想选择固定的就是用class取名字来区分

<style>
        .s9 {
            color: red;
        }
</style>

<body>
    <ul class="s9">
        <li>`````</li>
    </ul>
    <ul>
        <li>>>>>></li>
        <li><a href="#">点我</a></li>
    </ul>
    <ol>
        <li>sd</li>
        <li>88sd</li>
        <li>opopopo</li>
    </ol>
</body>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul a {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>>>>>></li>
        <li><a href="#">点我</a></li>
    </ul>
    <ol>
        <li>sd</li>
        <li>88sd</li>
        <li>opopopo</li>
    </ol>
</body>

</html>

（2）子元素选择器

子元素选择器只能选择最近一级的子元素，可不仅仅只是一个元素，只要是它的亲儿子就行，也可能是多个。像下面的例子中<p>标签里的<a>标签就不会选中，因为是孙子元素。

元素1 > 元素2

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

<body>
    <div class="ss">
        <a href="#">牛逼</a>
        <p>
            <a href="#">哦哦哦哦哦哦</a>
        </p>
        <a href="#">99999</a>
    </div>
</body>

（3）并集选择器

并集选择器可以选择多组标签同时定义相同的样式。并集选择器是通过英文逗号连接。

元素1,元素2,元素3......

<style>
        div>a,
        .ss .o,
        .k9 {
            color: red;
        }
 </style>
<body>
    <div class="ss">
        <a href="#">牛逼</a>
        <p>
            <a href="#">哦哦哦哦哦哦</a>
        </p>
        <a href="#">99999</a>
    </div>
    <ul class="k9">
        <li>安徽</li>
        <li>江南</li>
    </ul>
    <ul class="ss">
        <li class="o">北京</li>
        <li>浙江</li>
    </ul>
</body>

（4）链接伪类选择器

a:link      选择所有未被访问的链接
a:visited   选择所有已经被访问的链接
a:hover     选择鼠标指针位于其上的链接
a:active    选择活动链接(鼠标按下为松开的链接)

如果想要全部写的话，是按照一定的顺序的。linked---visited---hoverr---active。

<style>
        a {
            color: aliceblue;
        }
        
        a:hover {
            color: red;
        }
</style>
<body>
    <a href="#">点我</a>
</body>

（5）focus伪类选择器

foucus伪类选择器可以帮助我们选择光标的，一般我们用来与<input>一起使用。

 <style>
        input:focus {
            background-color: deeppink;
        }
 </style>

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