CSS 复合选择器（后代子并集伪类）

最新推荐文章于 2022-08-16 19:52:37 发布

CodeDoraemon

最新推荐文章于 2022-08-16 19:52:37 发布

阅读量491

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40417070/article/details/113331573

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1. 复合选择器基础概念

在这里插入图片描述

2. 后代选择器

在这里插入图片描述

2.1 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器之后代选择器</title>
    <style>
        /*将 ol 里面的 li 选出来改为pink*/
        /*可以考虑使用后代选择器*/
        ol li a {
            /*层层查找 一直找到 a 其余的不影响*/
            color: green;
        }

        ul li {
            color: antiquewhite;
        }

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

<body>
    <!-- ordered list 简称ol 有序列表 -->
    <!-- list 列表  -->
    <!-- unordered list无序列表 ul -->
    <!-- 
        class 属性大多数时候用于指向样式表中的类（class）
    不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。 
    -->
    <ol>
        <li>li是 ol 的孩子</li>
        <li><a>li里面的标签孙子标签</a></li>
    </ol>

    <ul>
        <li>li 是 ul 的孩子</li>
        <li><a href="#"> 这个不加到 a 的层级是不会变得 </a></li>
    </ul>

    <ul class="nav">
        <li>li 是 ul 的孩子</li>
        <li><a href="#"> 这个不加到 a 的层级是不会变得 </a></li>
    </ul>
</body>

</html>

2.2 运行结果

在这里插入图片描述

3. 子选择器（亲儿子选择器）

在这里插入图片描述

3.1 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <!-- 只会选择距离最近的一级，相当于 亲儿子 -->

    <style>
        /*使用大于号 只会选择 字类中的 a .孙子中的 a 是不会选择的*/
        .nav>a {
            color: red;
        }
    </style>
</head>

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

    </div>
</body>

</html>

3.2 运行结果

在这里插入图片描述

4. 小题练习

在这里插入图片描述

5. 并集选择器

在这里插入图片描述

5.1 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        /*并集选择器 中间使用逗号进行隔开 从而设置相关属性*/
        /*并集选择器习惯于竖着写*/
        /*最后一个选择器不需要加逗号*/
        div,
        p,
        .pig li {
            color: antiquewhite;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>

    <span>光头强</span>

    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

5.2 运行结果

在这里插入图片描述

6. 伪类选择器

在这里插入图片描述

6.1 链接伪类

在这里插入图片描述

6.2 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <!-- 浏览网页的时候，看链接的不同的颜色 -->
    <!-- : 就是伪类选择器 -->
    <style>
        /*默认蓝色下划线*/
        /* 未访问的链接 a:link, 将未访问的链接找出来 */
        a:link {
            color: black;
            /*取消下划线*/
            text-decoration: none;
        }

        /*找到浏览过的标签*/
        a:visited {
            color: #333;
        }

        /*选择鼠标经过的标签*/
        a:hover {
            color: gray;
        }

        /*选择鼠标正在按下还没有弹起来的那个链接*/
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="none" target="_blank">hello</a>
    <a href="4545">这个没有访问</a>
</body>

</html>

6.3 运行结果

在这里插入图片描述

7. 链接伪类选择器

在这里插入图片描述

不按照顺序写出现的结果会是设置无效
lvha
link
visited
hover
avtive
实际中，只需要一个标签选择器和一个鼠标经过而选择的选择器

7.1 示例代码

        /*实际中常用*/
        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369
            ;
        }

8. :focus 伪类选择器

适用于选取获得焦点的表单元素
在这里插入图片描述

8.1 示例代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*把获得光标的 input（输入） 表单元素选取出来*/
        /*选取出来就可以上色*/
        input:focus {
            background-color: #369;
        }
    </style>
</head>

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

</html>

8.2 运行结果

在这里插入图片描述

9. 复合选择器小结

在这里插入图片描述

CodeDoraemon

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 复合选择器（后代子并集伪类）

1. 复合选择器基础概念2. 后代选择器2.1 示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复合选择器之后代选择器</title> &lt
复制链接

扫一扫