css中 以下属于层次选择器的是

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

在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;才会被应用到该元素上。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中 以下属于层次选择器的是

粉丝

0

关注

0

收藏

0

已有0次打赏