CSS层次选择器

最新推荐文章于 2024-06-05 16:49:46 发布

全栈小李

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量200

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45162683/article/details/112912863

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

层次选择器

后代选择器：在某个元素的后面

/*  后代选择器
*/
   body p{
       background-color: gray;
   }

子选择器一代儿子

/*子选择器*/
body>p{
    background-color: red;
}

相邻兄弟选择器只有一个相邻向下

/*相邻兄弟选择器 */
 .c+ p{
     background-color: aqua;
 }

通用兄弟选择器当前选中元素的向下的所有兄弟元素

/*通用兄弟选择器 */
 .c~p{
     background-color: chartreuse;
 }

层次选择器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
</head>
<style>
<!--    -->
/*    p{*/
/*        background-color: red;*/
/*    }*/

/*  后代选择器
*/
   /*body p{*/
   /*    background-color: gray;*/
   /*}*/

/*子选择器*/

/*body>p{*/
/*    background-color: red;*/
/*}*/

/*相邻兄弟选择器   只有一个相邻 向下*/
/* .c+ p{*/
/*     background-color: aqua;*/
/* }*/
/*通用兄弟选择器 当前选中元素的向下的所有兄弟元素*/
 .c~p{
     background-color: chartreuse;
 }
</style>
<body>

<p>p1</p>
<p class="c">p2</p>
<p>p3</p>
 <ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
 </ul>
<p>p7</p>
<p>p8</p>
<p>p9</p>
</body>
</html>

全栈小李

关注

2
点赞
踩
0

收藏

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

层次选择器后代选择器：在某个元素的后面/* 后代选择器*/ body p{ background-color: gray; }子选择器一代儿子/*子选择器*/body>p{ background-color: red;}相邻兄弟选择器只有一个相邻向下/*相邻兄弟选择器 */ .c+ p{ background-color: aqua; }通用兄弟选择器当前选中元素的向下的所有兄弟元素/*通用兄
复制链接

扫一扫

专栏目录