选择 DIV 中的最后一个子项（CSS 选择器）[重复]

【问题标题】：Choose the last of child in DIV (CSS Selector) [duplicate]选择 DIV 中的最后一个子项（CSS 选择器）[重复]
【发布时间】：2022-01-07 19:48:22
【问题描述】：

我想用“last-child”或“nth-last-child(1)”选择最后一个“b”div
但是它不能正常工作。 div 的孩子将动态更新
所以我不能使用 nth-of-child(9)。

<div class="parent">
    <div class="a">
    <div class="a">
    <div class="a">
    <div class="a">
    <div class="b">
    <div class="b">
    <div class="b">
    <div class="b">
    <div class="b"> <-- this point
    <div class="c">
    <div class="c">
    <div class="c">
</div>

如果我选择“b”元素的最后一个，
如何应用我的 css 标签？

.parent > b:last-child{color:#f00;} // 不工作 .parent > b:nth-last-child(1){color:#f00;} // 不工作

【问题讨论】：

注：你必须关闭你的 div 的

标签： css element selector

【解决方案1】：

这样的选择器不存在。您需要知道 :nth-child 或 :nth-last-child 的确切位置才能仅使用 CSS 选择它。

不过，您可以使用 Javascript。

const divs = document.querySelectorAll('.parent>.b');

divs[divs.length-1].classList.add('red');

.parent>div::before { content: attr(class); }

.red { color: #f00; }

<div class="parent">
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div> <!-- this point -->
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
</div>

【讨论】：