Question

在我的测试中，div > ul规则的样式也适用于div ul li ul元素。为什么>子选择器并不总是强制执行？

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

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

我认为我理解b只会选择与a匹配的元素，如果它们是匹配a的元素的直接子元素。 b元素必须是font-weight: bold;元素的直接父级。

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

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

<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>

if (!/^V[09]\d{7}$/.test(rid)){
    alert("Enter your ID correctly: V0 followed by seven numbers.");
    return false;
}

jsfiddle

Answer 1

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

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

如果级联（基本上，归结为＆＃34; CSS文件定义的内容和浏览器＆＃34;）明确指定一个值，请使用它。
如果属性具有继承值且不在DOM的根目录中，请使用该属性的父值。
否则，请使用该属性的预定义初始值。

如果某个属性未在级联中定义，则会自动为其分配值“继承”。对于嵌套的ul元素，您没有为font-weight定义值，font-weight为one of those properties，默认为inherit（请注意＆＃34;继承＆＃34;顶部表格中的条目），因此它将使用其父元素使用的任何内容（您已将其定义为粗体）。

您的选择器正在准确选择直接子项，但该规则由子项的子项继承，因为该特定属性的行为方式。默认情况下不继承的属性不会影响子项。

＆＃13;

#parent {
  font-weight: bold;
}

＆＃13;

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

＆＃13;

Answer 2

font-weight和color（ul和li元素）的默认值为inherit。

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

如果您的某个列表项中包含a元素的href元素，那么它将为蓝色，因为color的{{1}}的默认值为a:link而非blue。

Answer 3

在你的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 4

它选择元素的直接后代，是的。在这种情况下div > ul，它选择每个ul作为任何div的直接后代。然而，它也选择了ul的后代。这就是它的工作方式。

正如评论中所解释的那样，由于font属性被所有后代继承 - 你得到了。

了解CSS子选择器＆gt;

4 个答案: