html - 如何在子元素(列表中)上将 CSS 字体大小的级联覆盖回默认值

Question

好的，所以我有一堆列表，其中一些是嵌套的，并且其中包含其他元素。它用于文档。我正在使用一个有序列表作为所有列表的父级，并想让第一“行”看起来像一个标题。所以在文本旁边有一个大数字。

article ol.toc > li {
  font-size: 2em;
}
article ol.toc > li * {
  font-size: medium; /* to catch IE, but will make all headings etc. 16px */
  font-size: initial; /* this does not work in IE, and not as expected for elements like the h2 */
}

<article>
  <ol class="toc">
    <li>
      Some title text here
      <p>a bunch of very important words that all the users will read, because documentation</p>
      <ul>
        <li>great point</li>
        <li>good point</li>
        <li>better point</li>
      </ul>
      <p>sometimes I amaze myself</p>
    </li>
    <li>
      Spelling is overrated
      <h2>Why is this h2 still small</h2>
      <p>It just HTML, get over it</p>
      <p>CSS, JavaScript, PHP</p>
    </li>
    <li>
      Foo
      <p>bar</p>
    </li>
  </ol>
  <p>for reference</p>
  <h2>an h2's default size</h2>
</article>

有没有办法做到这一点而不必重新声明 font-size对于每个 <ol>不是 16px 的子元素？ (如 h2、h3 等)

--- 编辑 --- 正如下面接受的答案所示，initial没有按我的预期工作。 我的解决方案是添加到 HTML 标记并将所有内容包装在 <li> 中用<div>然后可以将“撤消”字体大小应用于 <div>通过任何 0.5em或 medium或 1rem这实际上又回到了 1em = 16px

例如

      article ol.toc > li {
        font-size: 2em;
      }
      article ol.toc > li > * {
        font-size: 0.5em;
      }

<article>
  <ol class="toc">
    <li>
      Some title text here
      <div>
        <p>a bunch of very important words that all the users will read, because documentation</p>
        <ul>
          <li>great point</li>
          <li>good point</li>
          <li>better point</li>
        </ul>
        <p>sometimes I amaze myself</p>
      </div>
    </li>
    <li>
      Spelling is overrated
      <div>
        <h2>Why is this h2 still small</h2>
        <p>It just HTML, get over it</p>
        <p>CSS, JavaScript, PHP</p>
      </div>
    </li>
    <li>
      Foo
      <div>
        <p>bar</p>
      </div>
    </li>
  </ol>
  <p>for reference</p>
  <h2>an h2's default size</h2>
</article>

Answer 1

实际上 font-size: initial 可以在 Edge 和许多其他浏览器中使用，但在这里对您没有帮助。

这里的问题是 initial value工作方式与您预期的不同 - 它将所有内容重置为 spec default .因此，h2 变小是正确的。

因此，也许您可​​以指出您想要的特定行为和元素布局。在性能方面:如果你有很多(200+)节点，你可能会遇到使用星号选择器作为最后一个元素的最小影响。否则，随着引擎的发展，它不再发挥作用。