:last-child 嵌套列表使用 shadow dom答案

【问题标题】：:last-child of nested list using shadow dom:last-child 嵌套列表使用 shadow dom
【发布时间】：2018-12-15 05:42:14
【问题描述】：

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

<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）？

全局选择器不起作用，因为它对子级没有影响。而一个孩子自己也不知道自己是否真的是最后一个孩子，因为它不能看起来“外在”。

有什么想法吗？

【问题讨论】：

您对 div 的使用令人困惑。每个组件的影子树从哪里开始和结束？这些都是嵌套的阴影树还是一棵巨大的阴影树？如果是后者， :last-of-type 肯定会起作用。

标签： css css-selectors web-component shadow-dom

【解决方案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>

【讨论】：

嗨@vals，阴影从第一个 div 开始（假设所有 div 都是同一个 Web 组件）。