css - 如何制作一个编号与现有 h2 标签相同

Question

我正在使用 WordPress 主题，其中元素的 CSS与我想用于编号列表 <li>的标签大不相同。<h2>

我尝试像嵌套编号列表一样<h2><ol><li>Item one</li></ol></h2>，但主题只是去掉了嵌套，使它们彼此分开。

我在 CSS 和样式方面真的很弱，但我假设必须有一种方法可以使我的<li>标记标签从另一种样式继承它们的样式？

有没有办法说它<li marker> = <h2>以相同的方式复制样式？我宁愿不必手动查找和添加每个标记样式元素，以防我更改主题？

我最初需要内联执行此操作，因为我不想更改样式表，因为担心会弄乱可能正在使用该<li>标记的许多其他页面。

谢谢你。

标签： css

Answer 1

如果没有像 SASS 这样的预处理器，我看不到任何方法可以在原始 CSS 中执行此操作。我能想到的唯一选择是针对您关心的所有样式，例如颜色，内联color: inherit以覆盖 li 值并从 h2 继承父值。例如：

主题 CSS

li {
    color: red;
}
h2 {
    color: purple;
}

HTML （内联样式继承使用 h2 颜色而不是 li 颜色）

<h2><ol>
    <li style="color:inherit">Hello</li>
</ol></h2>

结果：

“Hello”是紫色的，因为它inherit告诉 HTML 使用父样式 (h2) 而不是样式表 (li) 中的样式。这仅适用于内联样式的优先级高于 CSS 文件中的任何内容。

JS 小提琴示例： https ://jsfiddle.net/Chris_Hayes/ocmkge8n/