Question

我遇到了这两个有点相似的东西。在我的一个应用程序中，这两者之间存在差异，尤其是在使用IE7时。我想知道：这两者之间的最大区别是什么。随意详细说明和网站链接。

Answer 1

空格选择所有后代。 >仅选择直接后代（“子”元素）。

有关所有选择器的详细概述，请参阅this w3 page。从该页面：

E＆gt; F ... E元素的F元素子... child combinators

和

E F ... E元素的F元素后代...... descendant combinator

请注意，这种差异并非特定于IE7。所有体面的现代浏览器都支持这两种语法。 CSS2中也存在相同的选择器。在quirksmode我只看到IE6及以下（* shudder *）与子选择器有问题。

Answer 2

这适用于#id元素下所有 li元素

#id li

这仅适用于#id元素

下面的li元素直接

#id > li

Answer 3

标准X Y和X > Y之间的区别在于后者只会选择直接子女。例如，请考虑以下标记。

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>

#container > ul的选择器仅定位作为div的直接子节点的uls，其id为容器。例如，它不会针对第一个孩子的ul。

出于这个原因，使用子组合器有性能优势。实际上，特别是在使用基于JavaScript的CSS选择器引擎时，建议使用它。

来源：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

“#id li {...}”和“#id＆gt; li {...}”之间的区别

3 个答案: