[分享]css中 以下属于层次选择器的是

在CSS中，选择器是用于确定将样式应用到哪个元素的规则。层次选择器是一种可以根据元素之间的关系选择元素的选择器。以下是常用的层次选择器：.parent > .child { / 选择所有clas...

在CSS中，选择器是用于确定将样式应用到哪个元素的规则。层次选择器是一种可以根据元素之间的关系选择元素的选择器。以下是常用的层次选择器：

.parent > .child {
  /* 选择所有class为child的元素，且其父元素的类名为parent */
  /* 注意：这里的 > 表示选择紧接着在父元素下一级的元素 */
  color: red;
} 

上例中，选择器.parent > .child表示选择所有class为child的元素，且其父元素的类名为parent。例如：

<div class="parent">
  <div class="child">我将变成红色</div>
</div> 

在这个例子中，只有包含class为child的元素的父元素的类名为parent时，样式color: red;才会被应用到该元素上。

.parent .child {
  /* 选择class为child的所有元素，且其祖先元素中存在类名为parent的元素 */
  color: blue;
} 

上例中，选择器.parent .child表示选择class为child的所有元素，且其祖先元素中存在类名为parent的元素。例如：

<div class="parent">
  <div>
    <p class="child">我将变成蓝色</p>
  </div>
</div> 

在这个例子中，只要该元素的祖先元素中有class为parent的元素，样式color: blue;就会被应用到该元素上。

.first + .second {
  /* 选择紧接着在class为first的元素后面的所有class为second的元素 */
  color: green;
} 

上例中，选择器.first + .second表示选择紧接着在class为first的元素后面的所有class为second的元素。例如：

<div class="first"></div>
<p class="second">我将变成绿色</p> 

在这个例子中，只有紧接着在class为first的元素后面的class为second的元素，样式color: green;才会被应用到该元素上。