＆gt;之间有什么区别？和空间？

Question

这两种风格有何不同之处：

element1 > element2 {
   ...
}

和

element1 element2 {
   ...
}

Answer 1

element1 element2选择element1

中的所有元素

示例

＆＃13;

＆＃13;

<style>
.element1 .element2{ 
    color: #2196F3;
    background-color: #FFEB3B;
}
</style>

<div class="element1">
    <p class="element2">
        As you can see that this paragraph with class `element2` is inside div with class `element1` and so it's catched by css written above.
    </p>
</div>

＆＃13;

＆＃13;

＆＃13;

尽管

element1 > element2选择父级为element2

的每个element1

＆＃13;

＆＃13;

<style>
.element1 > .element2{ 
    color: #2196F3;
    background-color: #FFEB3B;
}
</style>

<div class="element1">
    <p class="element2">
        This paragraph is catched by css above because this paragraph with class `element2` is immediate child of div with class `element1`.
    </p>
</div>

<!--no effect-->
<div class="element1">
   <div class="middleelement">
      <p class="element2">
          This paragraph is <strong>NOT</strong> catched by css written above because it's not immediate child of div with class `element1` because class `middleelement` comes in between. To refer to this paragraph, you have to write css as `.element1 &gt; .middleelement &gt; .element2`
      </p>
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

element1 > element2选择父级为<element2>元素的所有<element1>元素（有关详细信息，请参阅child combinator selector），而element1 element2选择所有<element2> } <element1>元素内的元素（有关详细信息，请参阅descendant selector）。

示例：
如果您必须遵循DOM标记（请参阅此JSFiddle）：

a
  c
  b
    c
  d
    c

你使用a c {bg -> red}（伪代码）所有c元素都将变为红色，但如果你也使用a > c {bg -> blue}，则第一个c元素将变为蓝色，而另一个元素将变为红色。这是因为a元素是第一个c元素的直接父元素。

Answer 3

>是child combinator，表示直接的孩子，而空格（或>>）是descendant combinator，这意味着其他元素可以位于第一个

如果您有以下DOM树

a
  b
    c
  d

然后a > c将不匹配，而a c将匹配c元素。

Answer 4

element1 element2

选择elements

中的所有elements

element1 > element2

选择父级为elements

的所有element