1

下面是我的 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都变成了红色。

子组合子应该只影响子，但是这里的兄弟姐妹继承了顶级子的财产。您能否详细说明一下现场发生的情况？如果我只希望上面的标题部分为红色，那么 CSS 应该是什么样子？

4

3 回答 3

4

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

在给出标记且没有其他信息的情况下，没有选择器只能针对第一级列表。

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

div > ul > li {
  color: red;
}

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

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

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

.myList > li {
  color: red;
}
于 2013-02-09T14:33:58.583 回答
1

幕后

这是因为该color属性是默认继承的。因此，如果您在顶部元素（例如<body>）上定义颜色，它将应用于所有不覆盖此属性的子元素。这对于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>) 的使用并没有真正适应。我会推荐使用定义列表( <dl>)。

CSS 解决方案：覆盖属性

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

ul > li > ul > li {
  color: black; # back to default document color
}
  • 亲：仅 CSS ；
  • 缺点：添加额外的规则，降低可读性。
于 2013-02-09T14:59:36.090 回答
0

我会为标题添加一个标签包装器并以这种方式对其进行样式设置：

<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 会变成红色。

于 2013-02-09T14:36:28.467 回答