子组合器（>）CSS是否会影响同级元素？

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.2 subtitlle1.1 ， subtitlle1.2 ， subtitlle2.1 ， subtitlle2.2变为红色。

子组合器应仅影响子项，但此处的同级继承了顶级子项的属性。 您能否详细说明背后的情况？ 如果我只希望上面的标题部分为红色，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属性是继承的。 因此，如果在顶部元素上定义一种颜色（例如<body> ），它将应用于所有不覆盖此属性的子级。 这对于CSS中心的级联机制至关重要。

解决方案

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

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

首先，使用（可能添加class属性）将文本包装到标签中：

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

然后定义颜色：

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

优点：添加语义并更有效地使用CSS；
缺点：未排序列表（ <ul> ）的使用并没有真正适应。 我建议使用定义列表（ <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会变成红色。

子组合器（>）CSS是否会影响同级元素？

问题描述

3 个解决方案

解决方案1
4 已采纳 2013-02-09 14:33:58

解决方案2
1 2013-02-09 14:59:36

幕后花絮

解决方案

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

CSS解决方案：覆盖属性

解决方案3
0 2013-02-09 14:36:28

子组合器（&gt;）CSS是否会影响同级元素？

问题描述

3 个解决方案

解决方案1 4 已采纳 2013-02-09 14:33:58

解决方案2 1 2013-02-09 14:59:36

幕后花絮

解决方案

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

CSS解决方案：覆盖属性

解决方案3 0 2013-02-09 14:36:28

子组合器（>）CSS是否会影响同级元素？

解决方案1
4 已采纳 2013-02-09 14:33:58

解决方案2
1 2013-02-09 14:59:36

解决方案3
0 2013-02-09 14:36:28