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

一个选项是给你的'目标'一个类，如：

.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元素的内容。一种常见的方法是为相关项目分配一个类。

<li class="target">

Answer 3

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

我会使用jQuery。

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

.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。这是一个显示我的建议的小提琴：

http://jsfiddle.net/knnzmutq/

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

这里的基本思想是首先在.simple中定义普通li元素的样式，然后通过使用>选择器专门覆盖子节点而不影响嵌套元素。 .simple > li > ul > li说的是从简单的课开始，然后只选择子li，然后只选择第一层的chldren ul，然后只选择那个ul的第一个孩子... ... ...但是当你可以通过小提琴看到，红色不会被我标记为＆＃34的最后一层li元素继承;而不是目标＆＃34;

要记住的一点是，这个css特定于你的例子。我不知道你的实际html是什么样的，以及你的目标行为是否完全像这样，没有别的。很明显，这是依赖选择器的基本示例，并不一定是您问题的精确答案。

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

4 个答案: