css关系选择器

最新推荐文章于 2024-11-07 18:41:16 发布

pqxpq

最新推荐文章于 2024-11-07 18:41:16 发布

阅读量95

点赞数

分类专栏：转前端(html+css+js) 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_52563729/article/details/127191783

版权

转前端(html+css+js) 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: red;
        }
    </style>
</head>
<body>
    语法:E F{ }选择所有的被E包含的F的元素, 中间用空格隔开
    <ul>
        <li>生效</li>
        <p><li>
            只要是后代都生效
        </li></p>
    </ul> 
</body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3~p{
            color: red;
        }
    </style>
</head>
<body>
    E~F{ }选择下面所有的兄弟元素,上面的不生效
    <br>
    <h3>111111111</h3>
    <p>
        1111111111111
    </p>
    <div>1111111111</div>
    <p>1111111111111111111111111</p>
</body>
</html>

相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3+p{
            color: red;
        }
    </style>
</head>
<body>
    语法E+F{ },这里的E并不发生变化,但是f会发生变化,如果中间被隔断了,也不会发生变化 
    <h3>111111111</h3>
    <h3>wwwwwwwwwwwwwwwwwwwww</h3>
    <div>w2222222222244444444441111</div>
    <p>11111111111111111</p>
    <p>22222222222222222222222222</p>
</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    和父代选择器有一些差别，不过只有第一代(直接子元素)生效 <br>
    语法div>a{...}
</body>
</html>