css - 如何将粗体应用于嵌套结构中的第一个 LI 元素

Question

我想是这样的:

#list li > a {
  font-weight: bold;
}

但这适用于每个 LI anchor ，我只想将顶级元素加粗，而不是 LI 中嵌套的 LI——如果这有意义的话？？ :)

编辑 |

  <ul id="list">
    <li><a href="#">A</a>
        <ul>
            <li><a href="#">B</a>
                <ul>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                </ul>
            </li>
            <li><a href="#">E</a></li>
        </ul>
    </li>
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>
    <li><a href="#">H</a></li>
  </ul>

Answer 1

您需要为您的选择器添加更多的特异性:

#list > li > a

这针对任何 a 是 li 的直接后代，而 li 是 #list 的直接后代(我假设是外部 ul，即使您的示例中未指定)。

您可以在 http://jsbin.com/segig/1/edit?css,output 查看它的运行情况.

不需要额外的标记或规则，这使它成为一个非常干净的解决方案。