在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;才会被应用到该元素上。
粉丝
0
关注
0
收藏
0