Question

我想的是：

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

但是这适用于每个LI锚点我只希望加粗的顶级项目而不是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

这可以使用CSS

完成

您正在寻找的概念称为伪元素或CSS选择器

尝试使用first-line代替first-child

答案：

JSBIN

http://jsbin.com/dogol/1/edit

<强> HTML

<html>
  <body>
<ul>
    <li class="ml"><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 class="ml"><a href="#">F</a></li>
    <li  class="ml"><a href="#">G</a></li>
    <li class="ml" ><a href="#">H</a></li>
  </ul>
  </body>
</html>

<强> CSS

.ml:first-line
{
  font-weight: bold;
}

Answer 2

我不认为你可以阻止css的级联效果，因此你必须在进行时指定课程。 Fiddle Demo

HTML：

            <ul class="first">
                <li><a href="#">A</a>
                    <ul class="innerfirst">
                        <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>

CSS：

            .first {
              font-weight: bold;

            }

            .innerfirst {
                font-weight: normal;
            }

Answer 3

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

#list > li > a

这会定位a的直接后代的任何li，#list是[{1}}的直接后代（我假设它是外ul，甚至虽然在你的例子中没有指明。）

您可以在http://jsbin.com/segig/1/edit?css,output处看到它。

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

如何在嵌套结构中应用粗体到第一个LI元素

3 个答案:

这可以使用CSS

答案：

JSBIN