<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;
}
现在可以通过使用:has()来解决这个问题，具体来说:
/* switch out the {class} below */
.{class}:not(:has(~ .{class}))
类似的技术还允许您选择容器中类的最后一次出现，或者一组元素中的最后一次出现。有关示例，请参阅下面的代码片段。
注意:has()目前支持Chrome, Edge和Safari，但不支持Firefox(2022年1月)
/* last in group */
.class:has(+ :not(.class)) {
background: pink;
}
/* anything but last in container */
.class:has(~ .class) {
box-shadow: 0 0 0 1px #F00A;
}
/* last in container */
.class:not(:has(~ .class)) {
background: #0F0A;
}
<div>
<div class="class">not-last</div>
<div class="class">not-last</div>
<div class="class">last-in-group</div>
<div>---</div>
<div class="class">not-last</div>
<div class="class">last-in-group</div>
<div>---</div>
<div class="class">last-class</div>
<div>---</div>
</div>
如果你在浮动元素，你可以颠倒顺序
即float:右;代替float: left;
然后用这个方法选择类的第一个子类。
/* 1: Apply style to ALL instances */
#header .some-class {
padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
padding-right: 20px;
}
这实际上只是将类应用到LAST实例，因为它现在的顺序颠倒了。
下面是一个适用的例子:
<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
border: 1px solid red;
padding-right: 0;
}
#header .some-class~.some-class {
border: 0;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
<img src="some_image" title="Logo" class="lfloat no-border"/>
<ul class="some-class rfloat">
<li>List 1-1</li>
<li>List 1-2</li>
<li>List 1-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 2-1</li>
<li>List 2-2</li>
<li>List 2-3</li>
</ul>
<ul class="some-class rfloat">
<li>List 3-1</li>
<li>List 3-2</li>
<li>List 3-3</li>
</ul>
<img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
