gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:02:55 25 4
gpt4 key购买 nike

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

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.5emmedium1rem这实际上又回到了 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>

最佳答案

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

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

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

关于html - 如何在子元素(列表中)上将 CSS 字体大小的级联覆盖回默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46103715/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com