html - 箭头颜色

Question

我正在尝试仅更改（2 级和 3 级）的箭头颜色。但是，我已经从如何设置 <details> <summary> 元素的箭头样式中尝试过这种方法？但它不起作用。任何人都可以帮忙吗？提前致谢。

details summary::-webkit-details-marker {
  color:red;
  background:white;
}

<details>
    <summary>Level 1</summary>
    <details>
        <summary>Level 2</summary>
        <details>
            <summary>Level 3</summary>
        </details>
    </details>
</details>

我尝试的方法是将其插入 CSS。

details summary::-webkit-details-marker {
  color:red;
  background:white;
}

这是jsFiddle

Answer 1

如果您只需要应用到子级别，只需添加 CSS 分层选择器detail detail .. 这将应用于子级别，而不是最顶层。

<details> <!-- Will not be applied -->
  ...
    <details> <!-- Will be applied -->

details details summary::-webkit-details-marker {
  color:red;
  background:white;
}

<details>
    <summary>Level 1</summary>
    <details>
        <summary>Level 2</summary>
        <details>
            <summary>Level 3</summary>
        </details>
    </details>
</details>