了解 CSS child 选择器 >

Question

在我的测试中，div > ul 规则的样式也应用于 div ul li ul 元素。为什么 > child select 或不总是强制执行？

我有一个解决方案，但我想了解为什么我需要使用这个解决方案。

在 CSS 中，我了解到 a b 将 select 每个匹配 b 的元素，它是匹配 a 的元素的后代。 a 元素可以出现在 b 元素之上的层次结构中的任何位置。

我以为我明白 a > b 将 select 仅匹配 b 的元素，如果它们是匹配 a 的元素的直接 child . a 元素必须是 b 元素的直接 parent。

但是，在下面的测试中，样式 font-weight: bold; 应用于所有 ul 项目，甚至那些不是 div 的直接 children 的项目元素。为了防止样式被应用，我需要先设置一个冲突的样式，就像我对 color 属性.

所做的那样

CSS 中的逻辑是什么使它按照它的方式工作？

div ul {
  color: black;
}
div > ul {
  font-weight: bold;
  color: red
}

<div>
  <ul>
    <li>red and BOLD 1</li>
    <li>red and BOLD 2</li>
    <li>red and BOLD 3
      <ul>
        <li>black and BOLD 1</li>
        <li>black and BOLD 2</li>
      </ul>
    </li>
    <li>red and BOLD 4</li>
  </ul>
</div>

jsfiddle

Answer 1

它选择元素的直接后代，是的。在本例中 div > ul，它会选择任何 div 的直接后代的每个 ul。但是它也选择 ul 的后代。这就是它的工作方式。

如评论中所述，由于字体属性被所有后代继承 - 你明白了。

Answer 2

在你的CSS中：

div > ul {
  font-weight: bold;
  color: red
}

字体粗细和颜色将直接应用于您 div 内 ul 内的所有元素，除非其他样式覆盖它们。

试试这个：

div > ul {
  font-weight: bold;
  color: red;
}
div > ul ul {
  font-weight: normal;
  color: black;
}

这应该使嵌套的 ul 不加粗，并且黑色而不是红色。

Answer 3

font-weight 和 color（对于 ul 和 li 元素）的 默认值 是 inherit.

因此您的规则仅适用于子 ul 元素（将 font-weight 设置为 bold），然后 li 元素继承该值。

如果您有一个 a 元素，其中一个列表项中有一个 href 元素，那么它将是蓝色的，因为 color 的默认值为 a:link 是 blue 而不是 inherit.

Answer 4

此效果不是 child 选择器的结果。您看到的是 property inheritance.

的结果

CSS 中的属性的值由 3 条规则定义：

如果级联（基本上，这归结为 "what is defined by CSS files and your browser"）明确指定了一个值，则使用该值。
如果属性具有继承值并且不在 DOM 的根目录中，请使用 parent 的值作为属性。
否则，使用属性的pre-defined初始值。

某些属性，如果未在级联中定义值，将自动分配值 'inherit'。对于嵌套的 ul 元素，您没有为 font-weight 定义值，并且 font-weight 是默认为 inherit 的 one of those properties（注意 "inheritance" 顶部 table 中的条目），因此它将使用其 parent 元素正在使用的任何内容（您定义为粗体）。

您的选择器准确地只选择了直接 children，但规则被 children 的 children 继承，因为那是特定属性的方式表现。默认不继承的属性不会影响children.

#parent {
  font-weight: bold;
}

<span id="parent">
  All of the text in here is bold,
  <span id="child">
    even the text in the child.
  </span>
</span>

了解 CSS child 选择器 >

Understanding the CSS child selector >

html

css-selectors