18.后代选择器,子代选择器,并集选择器,交集选择器

Little_Green1

于 2024-08-17 10:09:50 发布

阅读量1k

点赞数 30

分类专栏：前端文章标签：前端 html css3 css

本文链接：https://blog.csdn.net/Little_Green1/article/details/141275901

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一.后代选择器

选中元素的后代元素,什么是后代,就是被一个元素包裹着的元素,但这跟直接对父代使用选择器然后遗传给子代有什么区别呢,区别就是我们可以自己选择想要的子代,比如<div>标签包裹着一个<p>标签跟<span>标签,那我对<span>标签使用后代选择器,那么就可以只选中这个<span>标签.选择器写法就是:父选择器子选择器 {CSS属性},父子选择器之间用空格隔开.

<style>
    /* div里面的span文字变红 */
    后代选择器能选中所有后代
    div span {
        color: red;
    }
</style>
</head>
<body>
    <span>span标签</span>
    <div>
        <span>这是div儿子</span>
    </div>
</body>

二.子代选择器

那么这个子代选择器有什么不一样吗,其实就是会选中子代里面最上面的标签,比如:一个<div>标签里面包裹了一个<span>标签,还有一个<div>标签,然后第二个<div>标签里面又包裹了一个<span>标签,那么使用子代选择器就会选中第一个<span>标签.写法为: 父选择器 > 子选择器 {CSS属性}

<style>
    div > span {
        color: red;
    }
</style>
</head>
<body>
    <div>
        <span>儿子span</span>
        <p>
            <span>孙子span</span>
        </p>
    </div>
</body>

三.并集选择器

就是一次选中多组设置相同的样式,写法:选择器1,选择器2,选择器3,...,选择器N {CSS属性},知道就行

    <style>
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>
<body>
    <div>这是div标签</div>
    <p>p 标签</p>
    <span>span 标签</span>
</body>

四.交集选择器

有并集就有交集,两兄弟属于是.交集选择器选中同时满足多个条件的元素,选择器写法:选择器1选择器2,选择器之间连写.如果交集选择器中有标签选择器,标签选择器写最前面

    <style>
        p.box {
            color: red;
        }
    </style>
</head>
<body>
    <p class="box">p 标签, 使用了类选择器 box</p>
    <p>p 标签</p>
    <div class="box">div标签, 使用了类选择器</div>
</body>

这里我就写了两个选择器嘛,一个<p>标签选择器一个类选择器,然后上面那句话:选中同时满足多个条件的元素,第一个<p>标签,满足了标签选择器,还使用了class属性.属性值为box,也满足了类选择器,所以选中第一个标签,第二个<p>标签只满足标签选择器,第三个<div>标签只满足类选择器.所以只会选中第一个.