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;
}

不更改其他任何孩子。

非常感谢！

编辑：

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;
}

如果每个<ol>标签都想对任何个第一个孩子应用特殊的样式，则可以将常规*选择器与{{1} }

:first-child

（尽管我怀疑，除了ol > *:first-child { font-size:larger; }作为li的直接子代以外的其他内容都是有效的HTML）

问题编辑后的添加：

由于您的ol将位于其他元素内，因此可以使用以下选择器仅对ol的 direct （“第一级”）子对象进行修饰。（我将一个类应用于父元素，并在选择器中使用了它）

ol

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

Answer 2

如果它始终位于某个容器内（例如.container），则可以这样做：

.container > ol > li {
font-size:larger;
}

这里它将仅将其应用于直接子ol，仅将其应用于子ol。

CSS排除样式中的子项

2 个答案: