使用空格或大于号>在CSS选择器？ [英] Use a space or greater than sign > in CSS selector?

问题描述

我有一些CSS代码：

  .welcome div {
 font-size：20px; 
} 
  

这样做就是我想做的， p>

  .welcome> div {
 font-size：20px; 
} 
  

有任何理由使用一个或另一个，或者他们只是两种不同的方式做同样的事情？

c>> c>选择一个子元素，而使用空格将选择任何一个嵌套的元素。

例如...

使用␣ / space in the selector ...

 < div class =welcome> 
< section> 
< div>这将被选中< / div> 
< / section> 
< div>这将被选中< / div> 
< / div> 
  

这里，具有空格的选择器将以 div 在父元素的任何嵌套级别。

演示 （使用␣ / space） $ b

  .welcome div {
 font-size：20px; 
 color：＃f00; 
} 
  

---

使用>

 < div class =welcome> 
< section> 
< div>此操作不会被选中< / div> 
< / section> 
< div>这将被选中< / div> 
< / div> 
  

而这里，选择器会定位 div 这是 c> .welcome 的元素的子，但不会选择 div ，它嵌套在节标记内，因为它是外部 div 的孙子（但不是子节点）。

演示2 （使用> ）

  .welcome> div {
 font-size：20px; 
 color：＃f00; 
} 
  

---

从 MDN ：（对于␣）

␣以表示一个空格，或者更多的
正确地一个或多个空格字符）组合两个选择器
，使得组合的选择器仅匹配匹配
的那些元素第二选择器，其中存在祖先元素匹配
第一个选择器。后代选择器与子
选择器类似，但它们不要求
匹配元素之间的关系严格为父子。

从 MDN ：（ >

> 组合器分隔两个选择器，仅匹配由第二个选择器匹配的
元素，它们是第一个匹配的
元素的直接子元素。相反，当两个选择器是
与后代选择器组合时，组合的选择器
表达式匹配那些由第二选择器匹配的元素
，其存在由第一选择器匹配的祖先元素，
，无论DOM的跳数是多少。

I have some CSS code:

.welcome div {
   font-size: 20px;
}

which does what I want it to do, but also writing it like

.welcome > div {
   font-size: 20px;
}

will do the very same.

Is there any reason to use one over the other or are they just two different ways of doing the same thing?

解决方案

No they are completely different, using > selects a child element whereas using a space will select a nested element at any level.

For example…

Using ␣/space in the selector…

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

So here, the selector having space will target the div at any nested level of the parent element.

Demo (Using ␣/space)

.welcome div {
    font-size: 20px;
    color: #f00;
}

---

Using >

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

Whereas here, the selector will target your div which is a child of the element having .welcome but it won't select the div which is nested inside section tag as it is a grandchild (but not a child) of the outer div.

Demo 2 (Using >)

.welcome > div {
    font-size: 20px;
    color: #f00;
}

---

From MDN : (For ␣)

The ␣ combinator (that's meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.

From MDN : (For >)

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM.

这篇关于使用空格或大于号>在CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！