何时在 CSS 中使用 `>` 登录？

When to use `>` sign in CSS?

提问by monk

Possible Duplicate:
What does “>” mean in CSS rules?

可能的重复：
“>”在 CSS 规则中是什么意思？

I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :

我遇到过很多很多网站，我看到他们中的很多人在他们的 css 文件中使用这种类型的符号来创建导航栏，例如：

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

but when i omit the >sign as

但是当我省略>符号时

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

this still works the same way.

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

what is the difference and when to use >sign ?

有什么区别以及何时使用>符号？

回答by dougajmcdonald

>Means the direct child of a selector, so

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

li > awill ONLY match an <a>which is directly inside an <li>for example.

li > a例如，将仅匹配<a>直接在 an 内部的 an <li>。

If the html was <li><span><a>the <a>would not be matched.

如果HTML是<li><span><a>在<a>不匹配。

Removing the >will match any <a>nested inside an <li>, irrespective of other things around it, so li awould match the <a>in

删除>will 匹配任何<a>嵌套在 an 中<li>，而不管它周围的其他东西，所以li a会匹配<a>in

<li><a>but also in <li><span><a>, for example.

<li><a>但也在<li><span><a>，例如。

Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

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

回答by Oded

The >means a child element - it is the child selector. That is, directly/ immediatelynested after.

这>意味着一个子元素 - 它是子选择器。即直接/立即嵌套之后。

So, in your first example, the ulat the end of the selector must be directly descending from the li.

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

回答by Aldo Stracquadanio

The "li > ul" syntax specifies that the ul must be a child of li. "li ul" instead says that the the styled ul is descendant of li, no matter how many levels below.

“li > ul”语法指定 ul 必须是 li 的孩子。“li ul”改为表示样式 ul 是 li 的后代，无论低于多少级。

回答by T23

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

This is called the child selector. In browsers that support it, it applies the styles to selector2 child elements of selector1.

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

Edit:
The second one you use I believe is called the Descendant selectors.

编辑：
我相信您使用的第二个称为Descendant selectors。

They should work identically, but it's there's a little difference. The decendant selector will apply to ALL decendants ,whereas the child selector applies only to the direct children of the parent.

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

回答by Nix

You would use >when you want to target a direct descendant.

>当您想要定位直接后代时，您将使用。

For example, .foo > .barwould target .baronly if it is the direct child, while .foo .barwould target any descendant of .foothat has the class .bar.

例如，.foo > .bar将针对.bar如果是直接子而已，而.foo .bar将针对任何后代的.foo具有类.bar。

回答by Adam Lynch

>is to be used when the second operand/element is a childof the first operand/element. When it's omitted; descendantsare matched, which includeschildren.

>当第二个操作数/元素是第一个操作数/元素的子级时使用。省略时；后代是匹配的，其中包括孩子。

---

---

Therefore, if your HTML is structured as you suggested (#navigation ul li ul) then if you have the following in your CSS:

因此，如果您的 HTML 是按照您的建议 (#navigation ul li ul) 构建的，那么如果您的 CSS 中有以下内容：

#navigation ul {color:red;}

Then both #navigation ulAND#navigation ul li ulwill be coloured red (the text) as they BOTHare descendantsof #navigation ul.

然后这两个#navigation ul和#navigation ul li ul将红色（文本），因为它们BOTH是后人的#navigation ul。

But if you had the following in your CSS:

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

#navigation > ul {color:red;}

Then only#navigation ulwould be coloured red as it is the only ulwhich is a direct child of #navigation

然后只会#navigation ul被涂成红色，因为它是唯一ul的直接子代#navigation

回答by joar

>is the child selector.

>是子选择器。

It will only select immediate children of the previous element. If it there is a

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

#navigation ul li ul li ul

element it will notbe affected by the

元素它不会受到影响

#navigation ul li > ul

selector. But the

选择器。但该

#navigation ul li ul

willbe.

会。

---

---

EDIT: @Nixis right, but he isn't telling the whole truth it seems. *Why isn't the p-enclosed ulignored but only the span-enclosed? display: blockvs inlineperhaps? Who knows?

编辑：@ Nix是对的，但他似乎没有说出全部真相。*为什么不忽略p-enclosedul而只忽略span-enclosed？display: blockvsinline也许？谁知道？

回答by Lajos Arpad

The ">" selector is the child selector, space is the descendant selector. If tag3 is inside of tag2, which is inside tag1, and you use a child selector, then your css rule won't apply to tag3 if you refer to tag3 inside of tag1, however, if you use the descendant selector, tag3 will be transitively inside tag1. This means that he descendant selector is more general than the child selector.

">" 选择器是子选择器，空格是后代选择器。如果 tag3 位于 tag2 内部，tag2 位于 tag1 内部，并且您使用子选择器，那么如果您在 tag1 内部引用 tag3，那么您的 css 规则将不适用于 tag3，但是，如果您使用后代选择器，则 tag3 将是在 tag1 内传递。这意味着后代选择器比子选择器更通用。

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

is more specific than

比

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

because between the li tag inside the ul tag inside the tag with the id of navigation needs ul to be a direct child in the first example and in the second example ul doesn't need to be directly the child of li, li might have a child which is the parent of ul.

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