Question

有人知道如何使数字1或2具有与其余标题相同的样式。

这是代码：

ol {
  background-color: pink;
}

ol li {
  color: green;
  text-decoration: underline;
}

<ol>
  <li>
    <h1>Films préférés</h1>
    <ul>
      <li>Citizen Kane</li>
      <li>Rois et Reines </li>
      <li>Vendredi 13</li>
    </ul>
  </li>
  <li>
    <h1>Livre préférés</h1>
    <ul>
      <li>Le rouge et le noir</li>
      <li>Le choix de Sophie</li>
      <li>La chute</li>
    </ul>
  </li>
</ol>

Answer 1

您可以在这里看到它：codepen

简短答案：这是正常现象。列表样式数字不会从列表标题继承其样式。它们有自己的样式，您不能直接选择样式并设置样式。您只需删除列表样式（按list-style:none）并使用CSS创建自己的列表样式数字，然后将样式应用到它们。（详细说明）

长答案：

将display: inline;应用于您的标题：

ol > li > h1{
  display: inline;
}

添加自定义样式列表样式编号：

ol {
  list-style: none;
  counter-reset: counter;
}

ol > li {
  counter-increment: counter;
}
ol > li::before {
  content: counter(counter) ". ";
  display: inline;
}

将与h1默认样式相同的样式应用于列表样式：（您可以在此处查看h1默认样式：html default styles）

ol > li::before {
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

完整样式：

ol {
  list-style: none;
  counter-reset: counter;
}

ol > li {
  counter-increment: counter;
}

ol > li > h1{
  display: inline;
}

ol > li::before {
  content: counter(counter) ". ";
  display: inline;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

为什么数字“ 1”和“ 2”不带下划线？

1 个答案: