CSS层次选择器

最新推荐文章于 2022-12-12 11:12:10 发布

齐天大荒

最新推荐文章于 2022-12-12 11:12:10 发布

阅读量548

点赞数

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

本文链接：https://blog.csdn.net/qq_47897078/article/details/122000778

版权

CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

CSS层次选择器

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
<!--1.后代选择器-->
body p{
background: red;
}
<!--2.子代选择器-->
body>p{
background:pink;
}
<!--3.相邻兄弟选择器-->
.one+p{
background:green;
}
<!--4.通用选择器-->
.one~p{
background:yellow;
}
    </style>
</head>
<body>
      <p class="one">h1</p>
      <p>h2</p>
      <p>h3</p>
      <p>h4</p>
      <ul>
          <li>
              <p>p1</p>
          </li>
          <li>
              <p>p2</p>
          </li>
          <li>
              <p>p3</p>
          </li>
      </ul>


</body>
</html>

1.后代选择器

E F { } 功能描述：影响的F元素被包含在E元素内（E影响下面所有层次的元素F）

只打开后代选择器的代码，不打开的都默认注释掉

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

2.子代选择器

E>F { } 功能描述：影响的F是E的子元素（E影响下一层的元素F，仅仅是下一层的F）

打开后代选择器和子选择器

/*后代选择器*/
body p{
	background: red;
}
/*子选择器*/
body>p{
	background: pink;
}

可以看到只有p1p2p3变成了粉红色，说明子选择器生效，原因是只有p1p2p3才是body标签的儿子，p4p5p6并不是body标签的儿子，因为中间有ul和li标签。
其实此时p1p2p3依然受后代选择器的影响，但是由于子选择器在后代选择器后面，可以理解为后代选择器的影响被子选择器覆盖了

3.相邻兄弟选择器

后代选择器&子选择器&相邻兄弟选择器同时打开

E+F { } 功能描述：影响的F紧邻E后面（且E和F同一层次）

/*后代选择器*/
body p{
	background: red;
}
/*子选择器*/
body>p{
	background: pink;
}
/*/!*相邻兄弟选择器*!/*/
.active + p{
	background: green;
}

因为p1的class属性是active，相邻兄弟选择器只对紧邻后面的元素生效

为了进一步验证相邻兄弟选择器的影响范围只影响紧邻后面的元素，而不是前后都影响或者其他，试试下面的栗子的结果

<p>p1</p>
<p  class="active">p2</p>
<p>p3</p>
<p>p4</p>

4.通用选择器

四个选择器都打开

E+F { } 功能描述：E影响用一层次的所有F

/*后代选择器*/
body p{
	background: red;
}
/*子选择器*/
body>p{
	background: pink;
}
/*相邻兄弟选择器*/
.active + p{
	background: green;
}
/*通用选择器*/
.active~p{
	background: yellow;
}

由于还是h2的class=“active”，所以只有p3和p4被影响