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为我生成的内容。

先谢谢，胡安

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>

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

1 个答案: