在CSS中什么时候使用`>`符号？

Question

可能是重复问题:
CSS规则中的 “>” 代表什么意思？

我浏览了很多网站，看到其中许多在 CSS 文件中使用这种符号来创建导航栏，例如：

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

但是当我省略 > 符号时

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

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

什么是差异，何时使用 > 符号？

- monk

---

有关选择器的有用链接：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ - My Head Hurts

ul > li 和 ul li 是一样的。在这个 ul 列表中的列表项是 ul 的直接子代。 - blakroku

Answer 1

> 表示选择器的直接子元素，因此 li > a 只会匹配在 <li> 直接包含的 <a> 元素。

例如，如果 HTML 代码为 <li><span><a>，则 <a> 元素不会被匹配。

如果去掉 > ，则可以匹配在 <li> 中嵌套的任意 <a> 元素，而与其周围的其他元素无关。因此，li a 可以匹配如下代码中的 <a> 元素：

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

有关直接子元素选择器的更多信息，请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

- dougajmcdonald

---

这个例子非常糟糕，因为它使用了无效的标记语言（p不能是ul的子级）。事实上，这个例子非常糟糕，以至于在Firefox浏览器中，选择器ul > li将匹配您示例中的li。 - BoltClock

是的，我在举例时并没有考虑到有效性，只是为了证明一个观点，并为简单起见避免使用许多嵌套的li / ul。 - dougajmcdonald

Answer 2

< p > > 表示子元素 - 它是 子选择器。也就是说，直接或者立刻嵌套在元素内部。

因此，在你的第一个例子中，选择器末尾的 ul 必须是直接从 li 中下降而来的。

- Oded

Answer 3

“li > ul”语法指定ul必须是li的子元素。“li ul”则表示被样式化的ul是li的后代，无论在多少层级下。

- Aldo Stracquadanio

Answer 4

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

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

编辑：
我相信你使用的第二个被称为后代选择器。

它们应该是相同的，但有一点不同。后代选择器将应用于所有后代，而子选择器仅适用于父级的直接子元素。

- T23

---

它们不是“完全相同”的，对吧？ - Lightness Races in Orbit

Answer 5

当你想要定位一个直接子元素时，可以使用>。

例如，.foo > .bar 只会定位到 .bar 如果它是直接子元素，而 .foo .bar 会定位到任何具有类名为 .bar 的 .foo 后代元素。

- Nix

Answer 6

> 是 子选择器。

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

#navigation ul li ul li ul

元素不会受到影响。

#navigation ul li > ul

选择器。但是

#navigation ul li ul

将会。

---

编辑：@Nix 是对的，但他似乎没有说完整个真相。为什么p包含的ul不被忽略，而只有span包含的被忽略呢？display:block与inline之间的区别？谁知道呢？

- joar

---

在这种情况下，这并不完全正确，因为在这个例子中使用 >，它将针对任何 <li/> 的直接后代 <ul/> — 即使它被嵌套在其他十个 ul li 中。这只意味着它不会针对 li span ul。 - Nix

关于您的编辑，@Nix 确实说了全部的真相。您看到的行为是由于开头的<ul>标签恰好在它之前关闭了开头的<p>标签所致。这使得第二个嵌套的ul实际上成为其上方的li的子元素，以及该p的相邻兄弟元素。这与display: block与inline无关。 - BoltClock

这种情况不会发生在<span>标签中，因为闭合标签是必需的，不像<p>标签，所以DOM实际上将ul放在span内部构建。 - BoltClock

@BoltClock，这与标签类型有关。XHTML（strict）？不会在没有投诉的情况下关闭<p>标签，是这样吗？ - joar

@jwandborg：是的，如果您提供XHTML（而不仅仅是严格的XHTML doctype），则在符合XHTML标准的浏览器中，<ul>将包含在<p>中。隐式关闭标签规则是HTML的一部分，而不是XHTML。（这就是事情变得复杂和混乱的地方 :)） - BoltClock

Answer 7

> 用于当第二个操作数/元素是第一个操作数/元素的子元素时。当省略时，将匹配后代元素，这包括子元素。

---

因此，如果您的HTML结构如您所建议的那样（#navigation ul li ul），那么如果您在CSS中有以下内容：

#navigation ul {color:red;}

那么#navigation ul和#navigation ul li ul都将被着成红色（文本），因为它们都是#navigation ul的后代。

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

#navigation > ul {color:red;}

那么只有#navigation ul会被涂成红色，因为它是#navigation的唯一一个直接子级别的ul

- Adam Lynch

Answer 8

"

">选择器是子选择器，空格是后代选择器。如果在中，又在中，而您使用子选择器，则如果您在中引用，则不会将CSS规则应用于，但是，如果您使用后代选择器，则将是传递地在中。这意味着后代选择器比子选择器更通用。

"

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

比...更具体

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

因为在具有导航 ID 的标签内部的 ul 标签中的 li 标签之间需要 ul 成为第一个示例中的直接子级，而在第二个示例中，ul 不需要直接成为 li 的子级，li 可能有一个是 ul 的父级。

- Lajos Arpad

---

你在这里非常宽泛地使用了“特定”的词汇。就选择器的特异性而言，这两个选择器是相等的。如果你将#navigation ul li ul规则放在#navigation ul li > ul规则之后，它将会覆盖前者。 - BoltClock