使用详细信息图标覆盖 ul 默认光盘图标答案

【问题标题】：Override ul default disc icon with details icon使用详细信息图标覆盖 ul 默认光盘图标
【发布时间】：2020-12-04 15:29:09
【问题描述】：

我有一个无序列表。我想使用<details> 来选择性地显示其中一个项目符号的子列表：

<ul>
  <li><details>
    <summary>details bullet</summary>
    <ul>
      <li>detail 1</li>
      <li>detail 2</li>
    </ul>
  </details></li>

  <li>content 2
    <ul>
      <li>detail 2</li>
      <li>detail 3</li>
    </ul>
  </li>
</ul>

这可行，但会为“详细信息项目符号”创建两个项目符号图标：来自<li> 的圆盘和来自<details> 的三角形，例如* > details bullet。

我希望三角形替换“详细信息项目符号”上的圆盘，以便只有一个项目符号图标，例如 > details bullet。

我的无用研究：

通过阅读MDN's <ul> page，我看到我不允许将<details> 设为<ul> 的顶级元素（即，我必须将其包装为<li><details>...</li>），即使我尝试这样做没有按预期工作。

通过阅读MDN's list-style-type page，我看到细节三角形不是选项之一。

我尝试了设置组合

ol {
  list-style: inside|outside;
}
details > summary {
  list-style: inside|outside;
}

但它们没有达到预期的效果（一些组合删除了第二个项目符号图标，一些组合将其替换为第二个圆盘，但没有一个将三角形移动到第一个圆盘的位置）。

如何将圆盘图标替换为带有详细信息的项目符号点的三角形图标？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用否定的text-indent 来近似此值并删除默认项目符号

.detail {
  list-style: none;
}

.detail details {
  text-indent: -16px;
}

.detail details > ul {
  margin-left:16px;
}

<ul>
  <li class="detail">
    <details>
      <summary>details bullet</summary>
      <ul>
        <li>detail 1</li>
        <li>detail 2</li>
      </ul>
    </details>
  </li>

  <li>content 2
    <ul>
      <li>detail 2</li>
      <li>detail 3</li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案2】：

您没有提到是否可以向 HTML 添加类，所以我认为在不接触 HTML 的情况下尝试这是一个巧妙的练习。奇怪的是，与列表样式相比，通过伪类添加时，“空项目符号”（或圆形项目符号）的大小不同。

/* Circle bullet */
li ul:first-of-type li:first-child::marker,
li ul:first-of-type li::marker{
    content: "○   ";
    font-size: 80%;
}
/* Remove bullet */
ul:first-of-type li:first-child::marker {content: "";}
/* Indent details */
li details {
    margin: 0 0 0 -18px;
}

<ul>
  <li><details>
    <summary>details bullet</summary>
    <ul>
      <li>detail 1</li>
      <li>detail 2</li>
    </ul>
  </details></li>

  <li>content 2
    <ul>
      <li>detail 2</li>
      <li>detail 3</li>
    </ul>
  </li>
</ul>

【讨论】：