Html 为什么.classname>；ul{color:red}使所有嵌套<；ul>；它是红色的吗？

我不理解元素选择器“>”的含义。我原以为它只会指导孩子们，但事实并非如此

HTML

---

为什么两者都是红色的

classname>ul

-选择classname的第一级ul子级

---

classname ul

-选择classname的所有ul子级编辑：Ah。请注意，

color

属性是继承的。如果将元素设置为红色，则其所有子元素都将为红色，除非它们设置为其他颜色

因此，要编辑示例CSS以获得所需效果，请执行以下操作：

.infos ul {
  color: #0bdede;
}

.infos > ul {
  color: red;
}

---

我原以为它只会指导孩子们，但事实并非如此

是的。例如：

CSS HTML

直接子列表：红色


子体列表，非直接子体：绿色

但是，关于示例代码，有两件事需要注意：

虽然

classname>ul

看起来比

classname-ul

更具体，但事实并非如此，因此您的第二条规则将覆盖您的第一条规则（尽管因为两条规则具有相同的效果，很难判断）

虽然您可能知道这一点，但要真正选择类名，您需要的是

.classname

，而不是

classname

---

这个问题似乎离题了，因为手册中已经给出了答案。请在使用堆栈溢出之前使用Google。@johncode它没有解释：您不应该使用（而且它们不是Google）@johncode：我对问题进行了编辑，使其达到OP试图理解的实际点。使用

子类

来描述后代组合器和

子类组合器的第一级子类

会导致OP面临的困惑。任何较低级别的子类都只有一级。@Vla迪米尔：没错，但实际上并没有回答OP的问题。

body {
  color: #0bdede;
}

.infos > ul {
  color: red;
}

.infos ul {
  color: #0bdede;
}

.infos > ul {
  color: red;
}

.classname  ul  { color: green; }

.classname > ul { color: red; }

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

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