CSS学习日记4-选择器2-结构选择器

最新推荐文章于 2024-04-20 16:25:04 发布

此时的你才是你

最新推荐文章于 2024-04-20 16:25:04 发布

阅读量230

点赞数

分类专栏： CSS 学习日记文章标签： css

本文链接：https://blog.csdn.net/qq_24681419/article/details/107780740

版权

CSS 学习日记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

二.各种选择器
（一）基本选择器
（二）结构选择器
1.后代选择器
网页的结构层层嵌套的。其中元素是以父，子，兄弟等关系存在的。一个元素里面还元素，孙元素，子子孙孙无穷尽。后代选择就是选择后代，不管子孙只要是后代都能选上。
方法：CSS中祖宗和后代用空格隔开

<body>
    <main>
        <article>
            <h1>
                第一个儿子
            </h1>
            <aside>
                <h2>这是个孙子</h2>
            </aside>
            <h2>
                第三个儿子
            </h2>
        </article>
    </main>
</body>

<style>
        main article h2{
            color: red;
        } 
    </style>

在这里插入图片描述
可知第二个h2是在aside里面的，但是依然可以被选择上。
2.子元素选择
就是只选儿辈，不顾孙辈。用父子用 > 隔开

 <style>
        main article>h2{
            color: red;
        }

    </style>

在这里插入图片描述
3.后面兄弟元素选择
选择从某元素后面的所有兄弟（不包括某元素自己）。用 ~ 连接。你会发现，在之前的兄弟和自己不会选中，后面的都会选中。

<body>
    <main>
        <article>
            <h2>第零个儿子</h2>
            <h1>
                第一个儿子
            </h1>
            <h2>紧挨着第一个的第二个儿子</h2>
            <aside>
                <h2>这是个孙子</h2>
            </aside>
            <h2>
                第三个儿子
            </h2>
        </article>
    </main>
</body>

    <style>
        article h1~h2 {
            color: red;
        }

    </style>

在这里插入图片描述
4.紧邻兄弟元素选择
选择那个最亲的兄弟，穿一条裤子的那种。用 + 连接。
只有紧挨h1的h2被选中了。

    <style>
        article h1+h2 {
            color: red;
        }
    </style>

在这里插入图片描述

此时的你才是你

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习日记4-选择器2-结构选择器

二.各种选择器（一）基本选择器（二）结构选择器1.后代选择器网页的结构层层嵌套的。其中元素是以父，子，兄弟等关系存在的。一个元素里面还元素，孙元素，子子孙孙无穷尽。后代选择就是选择后代，不管子孙只要是后代都能选上。方法：CSS中祖宗和后代用空格隔开<body> <main> <article> <h1> 第一个儿子 </h1>
复制链接

扫一扫