Css中的层级关系

本文最后更新于：2020年3月26日 上午

Css中的层级关系

在浏览器的HTML文档中，元素之间存在许多关系，就像一颗树一样，如下：

DOM树结构

后代选择器

根据上方树结构，被包裹的元素被叫做包裹元素的后代，比如strong元素就是p元素的后代，anchor（a）元素也是。写法如下：

1
p strong { color: red; }

当然也可以嵌套很多层，深入定位：

1
2
3
4
dp strong a em { color: red; }
/*注意这里并不是所有的元素都会改变样式，只是在最后的一个后代（em）才会改变， 因此在后代选择器中，中间可以省略很多间隔，如下*/
p em { color: red; }
/*这里的会一直定位到p元素下面的em元素进行对应的样式修改，无论这个em多深*/

除去元素标签也可以使用class标签作为后代元素：

1
2
3
4
<p>
外层嵌套
  <span class="sidebar">内层嵌套</span>
</p>
1
p .sidebar { color: blue; } /*中间也必须有空格*/

⚠️注意：在具有多层的树结构中，如果css样式并未定位至对应的最低层，如图中p => strong => a => em结构：

1
p strong  { color: red; }

⚠️：这时候样式依然也会扩张到strong的子元素中

子元素选择器

当我们想缩小后端选择器的范围时，可以选择子元素选择器，他可以选择一个元素的子元素而不是后代元素：

1
p > strong { color: red; }

或者例如使用类选择器作为子选择器时候：

HTML: <p>这是父级元素的内容<strong class=”strongItem” >这是子级元素的内容</strong></p>

Css：p > .strongItem { color: red; }

🌰：当后代选择器和子元素选择器结合：

1
2
3
4
5
<p>  这是p标签的内容
  <strong class="strongItem">这是第一个strong
    <em>第一个em<span class="strongItem2">这是第一个span</span><span>第一个span<span>111</span></span</em>
  </strong>
</p>
1
2
3
4
/*这里*/
p strong em > span {
    color: red;
}

⚠️：当出现以下情况下，样式可能不同:

1
2
3
4
5
6
7
8
9
10
11
12
<!--第一种：在html中子元素相同元素的嵌套-->
<p>这是父级p
  <span>这是一个span
  	<span>这是第二个span</span>
  </span>
</p>
<!--第二种：在html中子元素后代选择中间出现块级元素被隔断-->
<p>这是p元素
  <div>这是span元素</div>
  <em>这是em</em>
</p>

1
2
3
4
5
6
7
8
/*第一种的css, 子元素第一个span应该才是p元素的子元素，但是第二个嵌套的span元素对于p元素是后代元素也产生了样式的改变*/
p > span {
   color: red;
}
/*第二种css,选择子元素em时候前面出现了div这种块级元素时候，则子元素选择器不起作用，若是放在所选择的子元素后面则可以起作用*/
p > em {
  color: red;
}
选择相邻兄弟元素

当多个元素在同一个父级元素下，可以使用相邻兄弟结合符匹配一个元素之后的第一个元素（而不包括本身）：

1
2
3
4
5
6
7
8
9
10
11
<!--1-->
<div>
  <p>p</p>
  <span>span</span>
</div>
<!--2-->
<div>
  <span>sapn1</span>
  <span>span2</span>
  <span>span3</span>
</div>
1
2
3
4
5
6
7
8
/*1.这里只会span元素产生效果，相邻兄弟结合符只会改变后边一个的样式*/
p + span {
  color: red;
}
/*2.当前面元素和后面兄弟以及后续兄弟元素相同时候，除去第一个元素不会改变，后续元素都会改变*/
span + span {
  color: red;
}

⚠️:使用结合符时候，要注意顺序，相邻兄弟结合符按照代码的源顺序生效，比如：ul + ol 不等于 ol + ul