为什么.classname＆gt; ul {color：red}使所有嵌套的<ul>成为红色？</ul>

Question

我不明白元素选择器“＆gt;”的含义。我认为它只会影响直接的孩子，但事实并非如此。

HTML

<div class="infos">
    <ul>
        <li> marmelade</li>
        <li> schokolade</li>
        <li> softeis</li>
        <li> mandeln</li>
        <li>
            <ul>
                <li> marmelade</li>
                <li> schokolade</li>
                <li> softeis</li>
                <li> mandeln</li>
            </ul>
        </li>
    </ul>
</div>

CSS

body {
  color: #0bdede;
}

.infos > ul {
  color: red;
}

为什么两个 <ul>都是红色的？ js fiddle

Answer 1

编辑：啊。请注意，color属性是继承的。如果你将一个元素设为红色，那么它的所有后代都将是红色的，除非它们被设置为另一种颜色。

因此，要编辑示例CSS以获得所需的效果：

.infos ul {
  color: #0bdede;
}

.infos > ul {
  color: red;
}

• http://jsfiddle.net/wrsHt/2/

---

  

我认为它只会影响直接的孩子，但事实并非如此。

确实如此。例如：

CSS

.classname  ul  { color: green; }

.classname > ul { color: red; }

HTML

<div class="classname">
    <ul>
        <li>Direct child list: red</li>
    </ul>

    <div>
        <ul>
            <li>Descendant list, not direct child: green</li>
        </ul>
    </div>
</div>

• http://jsfiddle.net/9YkDx/

但是，有关示例代码的两点注意事项：

1. 虽然classname > ul看起来比classname ul更具体，但事实并非如此，所以你的第二条规则将覆盖你的第一条规则（尽管因为两条规则都有相同的效果，所以很难说明。

2. 虽然您可能知道这一点，但要实际选择一个类名，您需要.classname，而不是classname。

Answer 2

classname > ul - 选择classname的第一级ul子项

classname ul - 选择所有类名

的ul子项