样式化嵌套列表中的第一个列表项

Question

如何编写仅针对我指定为 TARGET?

的 <li> 元素的 css 选择器

<ul class="simple">
<li> TARGET
    <ul>
        <li> TARGET
            <ul>
                <li></li>
                <li></li>
            </ul> 
        </li>

        <li>TARGET</li>

        <li>TARGET
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</li>

忘记补充一点，我无法为我的 html 分配类，它是用静态站点生成器生成的。如果可能，它必须与 css 一起使用。谢谢

Answer 1

一个选项是给你的'targets'一个class，比如：

.target  {
  background-color:rgba(20,20,20,0.2);
}
.target > ul {
    background: white;
}

<ul class="simple">
<li class="target"> TARGET
    <ul>
        <li class="target"> TARGET
            <ul>
                <li></li>
                <li></li>
            </ul> 
        </li>

        <li class="target">TARGET</li>

        <li class="target">TARGET
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</li>

您可以使用第一个子元素，尽管由于您使用的是嵌套项目，因此您也将选择所有子元素

ul:first-child  {
  
  background-color:rgba(20,20,20,0.2);

}

<ul class="simple">
<li> TARGET
    <ul>
        <li> TARGET
            <ul>
                <li></li>
                <li></li>
            </ul> 
        </li>

        <li>TARGET</li>

        <li>TARGET
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</li>

li{background:red;}

ul>li>ul>li>ul{background:blue;}

<ul class="simple">
<li> TARGET
    <ul>
        <li> TARGET
            <ul>
                <li></li>
                <li></li>
            </ul> 
        </li>

        <li>TARGET</li>

        <li>TARGET
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </li>
    </ul>
</li>

Answer 2

如果不编写一些脚本，您将无法解析 LI 元素的内容。一种常见的方法是为相关项目分配 class。

<li class="target">

Answer 3

CSS 据我所知没有这样的选择器。

我会为此使用 jQuery。

这是一个示例，它使用 jQuery 将 TARGET 替换为包含单词 TARGET 周围的自定义 class 的范围。

.targetClass {
   color: green;
   font-weight: bold;
}

$("ul.simple > li").html(function () {
    return $(this).html().replace(/TARGET/g, "<span class='targetClass'>T</span>"); 
});

这是我想出的一个有效的 jsFiddle：http://jsfiddle.net/bnpgh4gp/1/

Answer 4

好的，在您发表评论后更清楚您不能影响 html。这是 fiddle 显示我的建议：

http://jsfiddle.net/knnzmutq/

.simple li{
    color:black;
}
.simple > li, .simple > li > ul > li{
    color:red;
}

这里的基本思想是首先在 .simple 中定义普通 li 元素的样式，然后使用 > 选择器专门覆盖子元素而不影响嵌套元素。 .simple > li > ul > li 说的是从简单的 class 开始，然后只选择子 li，然后只选择第一层的子 ul，然后只选择 ul 的第一个子......说得令人费解.. .但是正如你在 fiddle 中看到的那样，红色并没有被我标记为 "not target"

的最后一层 li 元素继承

请记住，此 css 特定于您的示例。我不知道您实际的 html 是什么样子，也不知道您的目标行为是否与此完全相同，仅此而已。很明显，这是依赖选择器的一个基本示例，不一定是您问题的精确答案。

样式化嵌套列表中的第一个列表项

Styling first list items in nested lists

css

nested-lists