在CSS中选择内部HTML项 [英] Select inner HTML item in CSS

问题描述

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

How can I use CSS selectors to apply a style only to the inner item in a list. Example:

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> ul> ul.list或类似的选择器。

What I need is to have a border only arround the "Subitem 1.1" string. The list is generated and it's not possible to add an extra class or id and as the list has no fixed depth it's not an option to specify an "ul > ul > ul.list" or similar selector.

推荐答案

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

I believe you cannot do this with only CSS if it is not possible to use an Id or unique class. In this case I think jQuery is the way to go:

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

这个想法是使用 eq（）以定位最深的孩子。

The idea is to use eq() to pinpoint the deepest child.

希望这有助于

这篇关于在CSS中选择内部HTML项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！