HTML之层次选择器

最新推荐文章于 2023-03-31 05:06:39 发布

我怎么什么都不会啊

最新推荐文章于 2023-03-31 05:06:39 发布

阅读量439

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/qq_45678953/article/details/116898119

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML之层次选择器

1.后代选择器

多层次, 所有后代

例如以下: 所有p都将受到影响

<style>
    body p{
        background-color: #f9ff68;
    }
</style>

<body>
    <p>第一个p</p>
    <p>第二个p</p>
    <p>第三个p</p>
    <p>第四个p</p>
    <p>第五个p</p>
    <ul>
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>
        <li><p>5</p></li>
    </ul>
</body>

2.子选择器

一层, 儿子代

只有儿子这一代受到影响, 儿子再往下都不会被影响

<style>
    body>p{
            background-color: #b346ff;
    }
</style>

<body>
    <p>第一个p</p>
    <p>第二个p</p>
    <p>第三个p</p>
    <p>第四个p</p>
    <p>第五个p</p>
    <ul>
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>
        <li><p>5</p></li>
    </ul>
</body>

3.相邻兄弟选择器

当前层, 相邻之间是相同的标签(中间不可以被别的标签间隔), 他的下一个标签就是他的兄弟, 只有这一个兄弟会被影响

<style>
    #parent+p{
            background-color: #b346ff;
    }
</style>

<body>
    <p>第一个p</p>
    <p>第二个p</p>
    <p id="parent">第三个p</p>
    <p>第四个p</p>
    <p>第五个p</p>
    <ul>
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>
        <li><p>5</p></li>
    </ul>
</body>

4.通用兄弟选择器

当前层, 往下所有同标签的都是兄弟, 无论是否被别的标签间隔, 都被影响

<style>
    #parent~p{
            background-color: #b346ff;
    }
</style>

<body>
    <p>第一个p</p>
    <p>第二个p</p>
    <p id="parent">第三个p</p>
    <p>第四个p</p>
    <p>第五个p</p>
    <ul>
        <li><p>1</p></li>
        <li><p>2</p></li>
        <li><p>3</p></li>
        <li><p>4</p></li>
        <li><p>5</p></li>
    </ul>
</body>

我怎么什么都不会啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML之层次选择器

HTML之层次选择器1.后代选择器多层次, 所有后代例如以下: 所有p都将受到影响<style> body p{ background-color: #f9ff68; }</style><body> <p>第一个p</p> <p>第二个p</p> <p>第三个p</p> <p>第四个p</p> .
复制链接

扫一扫