Question

可能重复：
What does “>” mean in CSS rules?

我遇到了很多网站，我看到他们中的很多人在他们的css文件中使用这种表示法来创建导航栏，如：

#navigation ul li > ul {
  /* some code in between */
}

但是当我将>符号省略为

时

#navigation ul li ul {
  /* some code in between */
}

这仍然以同样的方式运作。

有什么区别以及何时使用>签名？

Answer 1

>表示选择器的直接子节点，所以

li > a仅匹配<a>的{{1}}，例如<li>。

如果html为<li><span><a>，<a>将无法匹配。

删除>将匹配嵌套在<a>内的任何<li>，无论其他内容如何，因此li a将匹配<{1}}中的<a> / p> 例如，

<li><a>以及<li><span><a>。

以下是有关直接子选择器的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

>表示子元素 - 它是child selector。也就是说，直接 / 立即嵌套。

因此，在您的第一个示例中，选择器末尾的ul必须直接从li下降。

Answer 3

“li＆gt; ul”语法指定ul必须是li的子级。 “li ul”反而表示风格的ul是li的后代，无论下面有多少级别。

Answer 4

selector[1] > selector[2]{ 
[property]: value 
}

这称为child selector。在支持它的浏览器中，它将样式应用于selector1的selector2子元素。

编辑：
你使用的第二个我称之为Descendant selectors。

他们应该以同样的方式工作，但它有一点不同。后代选择器将应用于所有后代，而子选择器仅适用于父项的直接子项。

Answer 5

如果要定位直接后代，可以使用>。

例如，仅当.foo > .bar是直接子项时，.bar才会定位.foo .bar，而.foo会定位具有类.bar的{{1}}后代}。

Answer 6

当第二个操作数/元素是第一个操作数/元素的子时，将使用

>。什么时候省略;匹配后代，其中包含子项。

因此，如果您的HTML按照您的建议（#navigation ul li ul）进行结构化，那么如果您的CSS中包含以下内容：

#navigation ul {color:red;}

然后#navigation ul AND #navigation ul li ul的颜色为红色（文字），因为 BOTH 后代 #navigation ul。

但是如果你的CSS中有以下内容：

#navigation > ul {color:red;}

然后只有 #navigation ul会被涂成红色，因为它是唯一ul #navigation

的直接子项

Answer 7

>是child selector。

它只会选择前一个元素的直接子元素。如果它有一个

#navigation ul li ul li ul

元素会

影响
#navigation ul li > ul

选择器。但是

#navigation ul li ul

将成为。

编辑：@ Nix is right，但他似乎没有说出全部真相。 *为什么p - 封闭的ul被忽略但只有span - 被封闭？可能是display: block vs inline？谁知道？

Answer 8

“＆gt;” selector是子选择器，space是后代选择器。如果tag3在tag2内部，在tag1内部，并且您使用子选择器，那么如果您在tag1内部引用tag3，则您的css规则将不适用于tag3，但是，如果您使用后代选择器，则tag3将是传递在tag1内部。这意味着他的后代选择器比子选择器更通用。

#navigation ul li > ul {
  /* some code in between */
}

比

更具体

#navigation ul li ul {
  /* some code in between */
}

因为在标签内的ul标签内的li标签与导航的id之间需要ul是第一个例子中的直接子节点而在第二个例子中ul不需要直接是li的子节点可能有一个孩子，这是ul的父母。

什么时候使用`＆gt;`签到CSS？

8 个答案: