问题描述
我具有动态生成的布局,因此元素的顺序可以更改。属于此布局的每个元素都有其自己的不同类。我希望能够选择某些类的元素,但前提是它是其父元素的最后一个子元素以应用样式。如果具有不同类的元素是其父元素的最后一个子元素,则不应选择该元素。可以使用这种scss选择器并在不使用javascript的情况下实现此功能吗?
示例:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
我只想选择child3类的元素,只有它是div与class parent的最后一个孩子。 因此,如果child2类元素是div类parent的最后一个子元素,则不会选中它,例如:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
解决方法
是的,这是正常的CSS行为。您可以执行以下操作:
.parent .child3:last-child {}
这是选择的规则:
-
.child3
中的一个.parent
元素。 -
.child3
元素排在最后,后面没有其他元素,包括文本。
对于SCSS,您可以执行以下操作:
.parent {
.child3 {
&:last-child {
// Rules.
}
}
}
示例代码段
.parent .child3:last-child {
background: #ccf;
}
<strong>Trial 1</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
预览
,您可以通过元素的属性选择元素,这样可以实现您的目标。
.parent div {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px black;
}
.parent div:last-of-type[class="child3"] {
background-color: red;
}
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>