CSS：基于关系的CSS选择器

最新推荐文章于 2024-10-02 15:35:50 发布

_卷心菜_

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量233

点赞数

分类专栏： java Web搭建文章标签： css 前端

本文链接：https://blog.csdn.net/Thumb_/article/details/121844414

版权

java Web搭建专栏收录该内容

41 篇文章 0 订阅

订阅专栏

在这里插入图片描述

后代选择器

定位所有的span元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        /* 定位所有的span元素 */
        span {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <span>
            span1
            <span>span2</span>
        </span>
    </div>
    <span>span3</span>
</body>
</html>

在这里插入图片描述
再定位div的后代span：

<style>
 	/* 定位所有的span元素 */
    span {
        background-color: blue;
    }
    /* 定位div的后代span */
    div span {
        background-color: yellow;
    }
</style>

在这里插入图片描述

子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        span {
            background-color: lightblue;
        }

        /* div的子元素span */
        div > span {
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div>
        <span>
            span1
            <span>span2</span>
        </span>
    </div>
    <span>span3</span>
</body>
</html>

在这里插入图片描述

相邻（下一个兄弟）元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻（下一个兄弟）元素选择器</title>
    <style>
        #one + li {
            color: lightcoral;
        }
    </style>
</head>
<body>
    <ul>
        <li id="one">one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</body>
</html>