<div class="commentList">
<article class="comment " id="com21"></article>
<article class="comment " id="com20"></article>
<article class="comment " id="com19"></article>
<div class="something"> hello </div>
</div>
我想选择#com19 ?
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-child {
border-bottom:none;
margin-bottom:0;
}
这是不工作的,只要我有另一个div.something作为实际的最后一个子注释列表。在这种情况下,是否可以使用最后一个子选择器来选择article.comment的最后一个外观?
js小提琴
有两种方法选择类的最后一个元素。
将元素包装在容器元素中。
html:
<div class="container">
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
<div>
css:
.container:last-child {
color: red;
}
如果您不想将您的元素包装在另一个元素中,那么您可以利用最后类型。
html:
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
css:
.member:last-of-type{
color: red;
}
有两种方法选择类的最后一个元素。
将元素包装在容器元素中。
html:
<div class="container">
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
<div>
css:
.container:last-child {
color: red;
}
如果您不想将您的元素包装在另一个元素中,那么您可以利用最后类型。
html:
<div class="member">Member</div>
<div class="member">Member</div>
<div class="member">Member</div>
css:
.member:last-of-type{
color: red;
}