Question

以下是我的HTML

<ul>
<li>title1
    <ul>
        <li>subtitle1.1</li>
        <li>subtitle1.2</li>
    </ul>
</li>
<li>title2
    <ul>
        <li>subtitle2.1</li>
        <li>subtitle2.2</li>
    </ul>
</li>
</ul>

这是CSS

        ul > li {
            color: red;
        }

我原本只期待title1和title2为红色。但是所有兄弟元素，即subtitlle1.1，subtitlle1.2，subtitlle2.1，subtitlle2.2都变为红色。

儿童组合子应仅影响儿童，但这里的兄弟姐妹继承了最高儿童的财产。你能详细说明一下behinf的场景吗？如果我只想要上面的标题部分为红色，那么css应该是什么样的？

Answer 1

该样式也适用于字幕，不是因为它们在外部列表中，而是因为它们是他们自己列表中的直接子项。

如果给出了标记，而没有其他信息，则没有选择器只能定位第一级列表。

如果你知道列表在另一个元素中，你可以使用直接子组合子来定位外部列表：

div > ul > li {
  color: red;
}

您可以覆盖内部列表的样式：

ul > li {
  color: red;
}
ul > li > ul> li {
  color: black;
}

如果您可以在外部列表中添加id或类，则可以使用它来定位它，并且它不会应用于内部列表，因为它们没有该id或类：

.myList > li {
  color: red;
}

Answer 2

幕后

这是因为color属性为inherited by default。因此，如果您在顶部元素上定义颜色（例如<body>），它将适用于所有不覆盖此属性的子项。这对cascading mechanism central to CSS非常重要。

解决方案

要解决您的问题，您可以：

HTML解决方案：添加更多语义

首先，将文本包装成带有（可能添加类属性）的标记：

<ul>
  <li><span class="term">title1</span>
    ...
  </li>
    ...
</ul>

然后定义颜色：

ul > li > span,
ul .term {
  color: red; # only apply to the span
}

pro：添加语义并更有效地使用CSS;
缺点：未分类列表（<ul>）的使用并未真正适应。我建议您使用definition list（<dl>）。

CSS解决方案：覆盖属性

您可以简单地强制字幕使用您想要的任何颜色：

ul > li > ul > li {
  color: black; # back to default document color
}

亲：仅限CSS;
缺点：添加额外规则，可读性更低。

Answer 3

我会为标题添加标签包装并以这种方式设置样式：

<ul>
<li><span>title1</span>
    <ul>
        <li>subtitle1.1</li>
        <li>subtitle1.2</li>
    </ul>
</li>
<li><span>title2</span>
    <ul>
        <li>subtitle2.1</li>
        <li>subtitle2.2</li>
    </ul>
</li>
</ul>

在这种情况下你的CSS将是：

ul > li > span {
    color: red;
}

这样只有title1和title2会以红色结束。

儿童组合子（＆gt;）css会影响兄弟元素吗？

3 个答案:

幕后

解决方案

HTML解决方案：添加更多语义

CSS解决方案：覆盖属性