Question

如何使用CSS选择器仅将样式应用于列表中的内部项。例如：

HTML片段：

<ul class="list">
  <li>Item 1</li>
  <li>
    <ul class="list">
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul class="list">
          <li>Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS片段：

ul.list {
  border: 1px solid red;
}

我需要的是在“Subitem 1.1”字符串周围设置一个仅的边框。生成列表并且无法添加额外的类或ID，并且由于列表没有固定的深度，因此不能指定“ul＆gt; ul＆gt; ul.list”或类似的选择器。

Answer 1

不能指定“ul＆gt; ul＆gt; ul.list”或类似的选择器。

为什么不呢？这个或者添加一个类就是解决方案。

您基本上已经指定了识别元素的要求，然后拒绝了您可以使用的所有方法。

Answer 2

如果无法使用Id或唯一的类，我相信你不能只使用CSS。在这种情况下，我认为jQuery是要走的路：

$("li").children().eq( $("li").children().length - 1 ).
  css('border', '1px solid red');

这个想法是使用eq()来确定最深的孩子。

希望这有帮助

Answer 3

<html>
<head>
<style type="text/css">
li.list {
  border: 1px solid red;
}

</style>
</head>

<body>
<ul >
  <li>Item 1</li>
  <li>
    <ul >
      <li>Subitem 1</li>
      <li>Subitem 2</li>
      <li>
        <ul >
          <li class="list">Subitem 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

</body>
</html>

我希望这个马可以帮助你..

Answer 4

JoseSantos是正确的，因为它不能用纯CSS完成。这是我在jQuery中的表现：

$("ul").each(function(){
    if ($(this).find("ul").length == 0)
        $(this).addClass("list");
});

在CSS中选择内部HTML项

4 个答案: