CSS 之后代、并列选择器

最新推荐文章于 2024-06-02 14:45:23 发布

nsq_ai

最新推荐文章于 2024-06-02 14:45:23 发布

阅读量1.5k

点赞数 1

分类专栏：前端学习 # HTML 5 学习 # CSS学习文章标签： css html5

本文链接：https://blog.csdn.net/weixin_45063703/article/details/118186963

版权

前端学习同时被 3 个专栏收录

28 篇文章 3 订阅

订阅专栏

HTML 5 学习

27 篇文章 2 订阅

订阅专栏

CSS学习

14 篇文章 0 订阅

订阅专栏

前言

复合选择器（后代选择器）
规律：一个空格表示后代关系

参考视频：
1.黑马程序员5天软件测试从入门到精通_软件测试基础教程

1 页面展示

后代选择器
并列选择器

2 代码

后代选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /* p,div,h3,h4,.span1,#span2{color: red;} */
        div span{color: blue;}

        </style>
    </head>
    <body>
        <div>
            <p>
                <span>我是P家的sapn </span>
            </p>
        </div>
        <div>
            <span>我是div 家的sapn</span>
        </div>
    </body>
    </html>

并列选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        p,div,h3,h4,.span1,#span2{color: red;}
        </style>
    </head>
    <body>
        <p>我是ppppppp</p>
        <div>我是div-div</div>
        <h2>我是h2-h2 </h2>
        <h3>我是h3-h3 </h3>
        <h4>我是h4-h4 </h4>
        <span class="span1">我是class 的span</span>
        <span id="span2">我是span 有id</span>
    </body>
</html>

3 总结

后代选择器

div span 用空格来连接，代表的意思是找到后代元素
后代可以是儿子，儿子的儿子

并集、并列选择器

div ,span,h1, .span1,#span2用逗号连接选择器，代表这些元素同时被选中

nsq_ai

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 之后代、并列选择器

前言复合选择器（后代选择器）规律：一个空格表示后代关系总结后代选择器div span 用空格来连接，代表的意思是找到后代元素后代可以是儿子，儿子的儿子并集、并列选择器div ,span,h1, .span1,#span2用逗号连接选择器，代表这些元素同时被选中...
复制链接

扫一扫