在 DIV 中选择 child 的最后一个（CSS 选择器）

Question

我想select“b”的最后一个div用“last-child”或“nth-last-child(1)”
但是它不能正常工作。 div 的 child 将动态更新
所以我不能使用 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>

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

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

Answer 1

这样的 selector 不存在。您需要知道关于 :nth-child 或 :nth-last-child 到 select 的确切位置，只有 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>

在 DIV 中选择 child 的最后一个（CSS 选择器）

Choose the last of child in DIV (CSS Selector)

css

element

selector