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

Question

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

4

我认为可以这样表达：

我认为应该这么说：

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

但这适用于每一个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>

- Alex.Barylski

3个回答

1

我认为你无法停止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;
            }

- YourFriend

这是我正在考虑的最后一招...我希望你能够用CSS上下文中的not运算符或其他方式表达“仅适用于直接子元素”或“适用于除子元素的子元素之外的所有子元素”。 :p - Alex.Barylski

1

你需要更具体地指定选择器：

#list > li > a

这会选中任何一个直接是 #list（我假设它是外部的 ul，尽管在你的例子中没有说明）的直接子元素 li 的直接子元素 a。

你可以在 http://jsbin.com/segig/1/edit?css,output 中看到它的作用。

不需要额外的标记或规则，这使得解决方案非常干净。

- Morgan Estes

这就是我一直在寻找的答案 :) 我已经放弃了...对我来说，CSS不够有趣，我不想花整个晚上抓狂 -- 谢谢你的回答，摩根！ - Alex.Barylski

1

很高兴能帮助你保持代码的整洁和链接的粗体！ :) - Morgan Estes

清晰的代码非常重要，但在这个阶段更多的是为了炫耀权利:p，所以再次感谢哈哈。 - Alex.Barylski

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2273202 · Accepted Answer

这可以使用 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;
}