Question

要设置嵌套列表的最后一个元素的样式...

<div>
    <div>
        <div>1</div>
        <div>2</div>
    </div>

    <div>
        <div>1</div>
        <div>2</div> <!-- style this -->
    </div>
</div>

...我们可以使用此选择器：

div>div:last-of-type>div:last-of-type

但是如果这些<div>是使用Shadow dom的Web组件-那么如何为最后一个元素设置样式（没有JS）？

全局选择器不起作用，因为它对子代没有影响。而且一个孩子本身不知道它是否真的是最后一个孩子，因为它本身看起来并不“外”。

有什么想法吗？

Answer 1

您并不是说您的影子真正从哪里开始。但是我想唯一的问题是从中级开始。

在这种情况下，在其中设置css变量应该可以：

我正在使用--mycolor属性跨越阴影边界

.element:last-child {
  --mycolor: red;
}

.inner:last-child {
    background-color: var(--mycolor);
}

<div>
    <div class="element">
        <div class="inner">1</div>
        <div class="inner">2</div>
    </div>

    <div class="element"> <!-- shadow starts here -->
        <div class="inner">1</div>
        <div class="inner">2</div> <!-- style this -->
    </div>
</div>

：使用阴影dom的嵌套列表的最后一个孩子

1 个答案: