mat*_*att 157 html css css-selectors css3
<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在commentList中有另一个作为实际的最后一个孩子,那就不起作用了.在这种情况下是否可以使用last-child选择器来选择最后一次出现article.comment？
Chr*_*ris 218
:last-child仅当有问题的元素是容器的最后一个子元素时才有效,而不是特定类型元素的最后一个元素.为此,你想要:last-of-type
根据@ BoltClock的评论,这只是检查最后一个article元素,而不是具有类的最后一个元素.comment.
HTML
<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>
CSS
body {
background: black;
}
.comment {
width:470px;
border-bottom:1px dotted #f0f0f0;
margin-bottom:10px;
}
.comment:last-of-type {
border-bottom:none;
margin-bottom:0;
}
som*_*som 25
现在可以通过仔细使用 来解决这个问题:has()，具体来说：
/* switch out the {class} below */
.{class}:not(:has(~ .{class}))
类似的技术还允许您选择除容器中最后一次出现的类或一组元素中最后一次出现的任何内容。有关示例，请参阅下面的代码片段。
注意：至少自 2023 年 12 月起has()目前在 Chrome、Edge、Safari 和 Firefox 中受支持
/* 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>新的:has()伪类（尚未被所有浏览器支持）让您非常接近解决方案：
.class:has(+ :not(.class))
限制是，这将找到.class后面跟着不具有此类的元素的任何元素。但这与问题的用例相匹配。
我想最正确的答案是：使用:nth-child（或者，在这种特定情况下，它的对应物:nth-last-child）。大多数人只通过它的第一个参数知道这个选择器，它根据 n 的计算获取一系列项目，但它也可以采用“[任何 CSS 选择器]”的第二个参数。
您可以使用此选择器解决您的情况： .commentList .comment:nth-last-child(1 of .comment)
但是技术上正确并不意味着你可以使用它，因为这个选择器现在只在 Safari 中实现。
进一步阅读：
小智 7
这在所有主流浏览器中都可以正常工作；
/* target first element with class ".comment" */
:nth-child(1 of .comment) {
background-color: red;
}
/* target last element with class ".comment" */
:nth-last-child(1 of .comment) {
background-color: red;
}<div class="commentList">
<div class="something"> hello </div>
<article class="comment " id="com21">test</article>
<article class="comment " id="com20">test</article>
<article class="comment " id="com19">test</article>
<div class="something"> hello </div>
</div>如果您要浮动元素,则可以撤消订单
即float: right;代替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>
我认为应该在这里评论一些对我有用的东西：
:last-child在需要的地方多次使用，以便它总是最后一个。
以这个为例：
.page.one .page-container .comment:last-child {
color: red;
}
.page.two .page-container:last-child .comment:last-child {
color: blue;
}<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>
<div class="page one">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>
<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>
<div class="page two">
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
<div class="page-container">
<p class="comment"> Something </p>
<p class="comment"> Something </p>
</div>
</div>