在 CSS 中选择内部 HTML 项目答案

【问题标题】：Select inner HTML item in CSS在 CSS 中选择内部 HTML 项目
【发布时间】：2023-04-02 04:38:01
【问题描述】：

如何使用 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”字符串周围有一个 only 边框。列表已生成，无法添加额外的类或 id，并且由于列表没有固定深度，因此不能指定“ul > ul > ul.list”或类似选择器。

【问题讨论】：

子项 1 与子项 1.1 有何区别？既然深度不固定，你怎么知道哪个项目需要应用 CSS？
如果你应用一个额外的类，CSS 有父组合器/伪类或第 n 级后代伪类，或者:not() 支持的不仅仅是简单的选择器，这将非常容易。
如果列表没有固定深度，是否要选择树中最后一个ul？例如它可以很容易地达到 1 级或 4 级？
问题在于这些列表是由 PHP 生成的，而 JS 不是一个选项，因为要求说它必须在禁用脚本的情况下也能工作。最后一个选项是修改 PHP 函数（非常丑陋的任务）或使用 JS。无论如何谢谢

标签： html css css-selectors

【解决方案1】：

如果无法使用 Id 或唯一类，我相信您不能仅使用 CSS 来执行此操作。在这种情况下，我认为 jQuery 是要走的路：

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

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

好吧，我正在寻找类似 :first-child 伪类的东西，我错过了... :deepest-node 也许？ :)
我知道没有任何选择器针对最深的后代，只有直接的后代 (>)

【解决方案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>

希望这对你有所帮助..

【讨论】：

【解决方案4】：

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

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

【讨论】：