html - CSS 从样式中排除 child

Question

ol li{
color: blue;
}
ol ol li {
color:black;
}
ol ol {
	list-style: upper-alpha;

<ol>
  <b><li>Topic 1</li></b>
    <ol>
      <li> Sub Topic 1</li>
      <li> Sub Topic 2</li>
      <li> Sub Topic 3</li>
    </ol>
    <b><li>Topic 2</li></b>
    <b><li>Topic 3</li></b>
    <ol>
      <li>Sub Topic 1</li>
      <li>Sub Topic 2</li>
      <li>Sub Topic 3</li>
    </ol>
</ol>
    

我希望是一个简单的问题。第一级<ol>始终是一个标题。尝试风格

ol li {
font-size:larger;
}

不改变 ol ol li 或其他 child 。

非常感谢!

编辑:

HTML结构是

<ol>
<b><li>Topic</li></b>
<ol>
<li> Sub Topic 1 </li>
<li> Sub Topic 2 </li>
</ol>
<b><li>Topic 2</li></b>
</ol>

目标是消除对粗体标签的需求。

Answer 1

有点不清楚你在问什么:“ol 的第一级总是一个标题”——你真的是说像 <h1> 这样的标题吗？ , < h2>等等，或者您的意思是要对第一个 <li> 应用特殊样式里面每个<ol>标签？

在后一种情况下，您可以使用 :first-child选择器，例如

ol > li:first-child {
  font-size:larger;
}

如果你想对任何第一个 child 应用特殊样式，如果每个<ol> tag，一般可以用*选择器，结合 :first-child

ol > *:first-child {
  font-size:larger;
}

(尽管我怀疑除 li 之外的任何其他内容作为 ol 的直接子项都是有效的 HTML)

---

问题编辑后添加:

由于您的 ol将在其他一些元素内，您可以使用以下选择器仅访问 ol 的直接(“第一级”)子元素. (我将一个类应用于父元素并在选择器中使用它)

.parent>ol>li {
  font-weight: bold;
}

<div class="parent">
  <ol>
    <li>Topic</li>
    <ol>
      <li> Sub Topic 1 </li>
      <li> Sub Topic 2 </li>
    </ol>
    <li>Topic 2</li>
  </ol>
</div>