css初学笔记-------层次选择器

最新推荐文章于 2024-09-20 14:39:18 发布

sakl_a

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量85

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_45015127/article/details/120644625

版权

上代码

/*
1、后代选择器
2、子选择器
3、相邻兄弟选择器
4、通用选择器
<!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>
    body p{  
        color: crimson;
         }
</style>
//子选择器
<style>
    body>p{
        color: cyan;
    }
</style>
//弟弟选择器(相邻兄弟选择器)只选择下一个相同标签
<style>
.xzq+p{
    color: darkgoldenrod;
}   
</style>
//所有弟弟选择器(通用选择器)选择下面所有相同标签
<style>
.xzq~h1{
    color: darkred;
}
</style>
</head>
<body>
<p class="xzq"></p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h1>h1</h1>
<h1>h2</h1>
<h1>h3</h1>
<h1>h4</h1>
</body>
</html>

对比注释和效果显示：