CSS选择器差异：元素元素与元素＆gt;元素

Question

以下两个CSS选择器有什么区别？

从解释here来看，它们听起来一样吗？

div p{}

选择div元素中的所有p元素

div > p{}

选择父级为p元素的所有div个元素。

Answer 1

差异在于深度。 w3schools网站不能很好地解释的是E>F只匹配E的直接孩子，而E F匹配任何深度的后代。

使用您的示例CSS，请考虑以下HTML代码段：

<div>
    <p id="paragraph1">I'm paragraph 1</p>
    <ul>
        <li><p id="paragraph2">I'm paragraph 2</p></li>
    </ul>
</div>

第一个规则集div p将匹配两个p块。第二个div > p只会匹配paragraph1。

Answer 2

div p{} 

此选项适用于p

内的所有div

div>p{}

这个说p需要成为div的直接后代

Answer 3

＆＃13;

＆＃13;

/*This one applies to all childrens (`span`) inside parent*/
div span {
    color: red;
}

/*This one says child (`span`) needs to be a direct descendent of parent*/
div > span {
    color: green;
}

＆＃13;

<div>
  <!--(`div`) does not represent an obstacle in both selectors-->
  <div>
    <span>I live in Duckburg.</span>
  </div>
  <ul>
    <li>
      <span>I live in Duckburg.</span>
    </li>
  </ul>
  <span>I live in Duckburg.</span><br>
  <span>I live in Duckburg.</span>
</div>

＆＃13;

＆＃13;

＆＃13;