仅设置嵌套列表的第一级

Question

我想在列表的顶级li 元素中实现放大字体大小和添加颜色边框和背景的简单效果，而不影响较低的嵌套级别（子列表）。这四个问题和答案是相关的，但下面不要回答我的问题。

Target first level <li>s and not the nested <li>s
Style first level of menu only
Style only first level of unordered list
styling a nested list in CSS

这是最简单的例子：

ol.toplevel > li {
	font-size: 160%;
	margin-bottom: 0.5em;
	margin-top: 1.5em;
	padding-bottom: 0.2em;
	padding-top: 0.1em;
}

ol.toplevel div.topleveltitle {
	background-color: yellow;
	border-bottom: 1px solid red;
	border-top: 1px solid red;
	color: red;
}

ol.toplevel li li {
	/*For lower nested levels, we don't want to inherit any top-level settings*/
	all: revert; /*does not seem to work at all, "unset" neither*/
	font-size: 70%; /*undo 160%, but we don't want to propagate 70% to lower levels!*/
}

<ol class="toplevel">
    <li><div class="topleveltitle">First title</div></li>
    <li><div class="topleveltitle">Second title</div>
        <ol>
            <li>Subitem</li>	
            <li>Subitem</li>	
            <li>Subitem</li>	
            <li>Subitem</li>	
        </ol>
    </li>
    <li>Third title
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li>	
        </ul>
    </li>
</ol>

经过这么多年的 css 开发，我希望这个简单的目标能够以一种简单、简洁和优雅的方式实现——没有技巧、黑客和冗余。所以这里是关于这个例子的具体问题：

1. 是否可以避免与topleveltitle一起引入helper <div>或<span>，并使用css只为顶级<ol>定义样式以影响每个顶级<li>文本而不影响嵌套子列表的内容？如果</li> 结束标签紧跟在标题之后，它会起作用，但它会是无效的 html，因为根据 html 规范，结束标签必须放在嵌套子列表 after 中，如示例。
2. 是否可以以一种可能简单的方式将颜色背景和边框扩展到列表项编号？
3. 是否有可能避免阻止样式从顶层继承到底层嵌套的所有这些复杂性？ “revert”不能正常工作，我不想显式枚举和设置所有在顶层修改的属性，特别是考虑到它们的值可能是未知的，因为它们本身可能被继承或依赖于用户/浏览器设置。我宁愿只影响顶层，而不是影响所有级别，然后枚举异常或重新定义较低级别的值。

Answer 1

实现你想做的事吗？

ol {
  counter-reset: my-awesome-counter;
}
ol li {
  font-size: 1rem;
  color: black;
  list-style: none;
  counter-increment: my-awesome-counter;
}
ol li::before {
  content: counter(my-awesome-counter) ". ";
  width: 2rem;
}
ol.toplevel > li::before {
  background-color: yellow;
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  color: red;
}
ul > li::before {
  content: ''
}
ol.toplevel > li {
  font-size: 1.8rem;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
  padding-bottom: 0.2em;
  padding-top: 0.1em;
}
ol.toplevel > li span {
  display: inline-block;
  width: calc(100% - 2rem);
  background-color: yellow;
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  color: red;
}

<ol class="toplevel">
    <li><span>First title</span></li>
    <li><span>Second title</span>
        <ol>
            <li>Subitem</li>	
            <li>Subitem</li>	
            <li>Subitem</li>	
            <li>Subitem</li>	
        </ol>
    </li>
    <li><span>Third title</span>
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li>	
        </ul>
    </li>
</ol>

它通过添加一个计数器并隐藏默认数字来使用自定义列表数字。

Answer 2

试试这个，使用 topleveltitle 类作为第三个标题。正如你已经定义的那样。

  <ol class="toplevel">
    <li><div class="topleveltitle">First title</div></li>
    <li><div class="topleveltitle">Second title</div>
        <ol>
            <li>Subitem</li>    
            <li>Subitem</li>    
            <li>Subitem</li>    
            <li>Subitem</li>    
        </ol>
    </li>
    <li><div class="topleveltitle">Third title</div>
        <ul>
            <li>Subitem
            <ol>
                 <li>Subsub</li>
                 <li>Subsub</li>
            </ol>            
            </li>   
        </ul>
    </li>
</ol>