<details><summary>箭头颜色

Question

我尝试只为(2级和3级)更改arror颜色。但是，我已经在How to style the arrow of elements?中尝试过这种方法，但它不起作用。有人能帮上忙吗？提前谢谢。

​

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>

​