html - CSS - 如何将样式应用于静态生成列表中的第一个元素

Question

我有一个 Asciidoctor 为我生成的列表

<ul class="sectlevel1">
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Certification Process</a>
  <ul class="sectlevel1">
    <li><a href="#">Stage 1: OnBoard</a></li>
    <li><a href="#">Stage 2: Developing The Connector</a></li>
    <li><a href="#">Stage 3: Certify</a></li>
    <li><a href="#">Stage 4: Publish</a></li>
    <li><a>Release Re-Certification</a></li>
  </ul>    
 <li><a href="#">Development</a>
</ul>

http://postimg.org/image/a1d9qzp2p/图片

我想在列表的第一级元素(介绍、认证过程、开发)中放置一些样式，这是执行此操作的合适选择器吗？

我只能编辑所有 <li>'s

此外，我无法更改 HTML，因为 asciidoctor 为我生成了 HTML。

提前致谢，胡安

Answer 1

最简单的解决方案是将整个事物包装在父对象中并通过它来处理结构。

.container > ul > li > a {
  font-weight: bold;
  font-size: 1.2em;
}

<div class="container">
  <ul class="sectlevel1">
    <li><a href="#">Introduction</a>
    </li>
    <li><a href="#">Certification Process</a>
      <ul class="sectlevel1">
        <li><a href="#">Stage 1: OnBoard</a>
        </li>
        <li><a href="#">Stage 2: Developing The Connector</a>
        </li>
        <li><a href="#">Stage 3: Certify</a>
        </li>
        <li><a href="#">Stage 4: Publish</a>
        </li>
        <li><a>Release Re-Certification</a>
        </li>
      </ul>
      <li><a href="#">Development</a>
  </ul>
</div>