CSS之层次选择器

最新推荐文章于 2024-07-06 20:00:00 发布

X_C~!

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量135

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/xc_init/article/details/110386922

版权

层次选择器
演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
/*后代选择器*/
  /* body p{
       background: aqua;
   }*/
/* 子选择器   */
    /*body>p{
        background: bisque;
    }*/
/* 相邻兄弟选择器  只向下一个同级别的不包含自身 不向上 */
    /*.xc + p {
        background: blueviolet;
    }
    .xc1 + li {
        background: aquamarine;
    }*/

/* 通用兄弟选择器 向下同级别的所有 不包含自身  */
    .xc~p{
        background: blueviolet;
    }
</style>
<body>
<p>p0</p>
<p class="xc">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li class="xc1"><p >p5</p></li>
    <li><p >p6</p></li>
</ul>
</body>
</html>

介绍：
1.后代选择器: 在某个元素后面比如祖爷爷爷爷爸爸你

/*后代选择器*/
  body p{
       background: aqua;
   }

2.子选择器 : 一代儿子

/* 子选择器   */
    /*body>p{
        background: bisque;
    }*/

3.相邻兄弟选择器同辈只选择同级别向下一个不包含自身

/* 相邻兄弟选择器  只向下一个同级别的不包含自身 不向上 */
    /*.xc + p {
        background: blueviolet;
    }
    .xc1 + li {
        background: aquamarine;
    }*/

4.通用兄弟选择器当前选中元素同级别向下所有元素不包含自身

/* 通用兄弟选择器 向下同级别的所有 不包含自身  */
    .xc~p{
        background: blueviolet;
    }

X_C~!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫