Css 区别于#id li{…}”字样；及#id>；“li{…}”；

我遇到了这两件有点相似的事情。在我的一个应用程序中，这两者之间存在差异，尤其是在使用

IE7

时。我想知道：这两者之间的最大区别是什么。请随意详细说明和站点链接。

空间选择所有子代。

仅选择直接子体（“子”元素）

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

E>F。。。E元素的F元素子元素

以及：

E F。。。E元素的F元素后代

---

请注意，这种差异并不是IE7特有的。所有现代浏览器都支持这两种语法。中也存在相同的选择器。在上，我只看到IE6及以下版本（*shubder*）的子选择器存在问题。

这将适用于id元素下的所有

li

元素

#id li

这将仅适用于#id元素下方的

li

元素

#id > li

---

标准

xy

和

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

选择器将仅针对id为container的div的直接子级ul。例如，它不会针对第一个li的孩子ul

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

来源：

在IE 7或IE 8中，在“怪癖”模式（可能还有IE7的“标准”，不确定）下，子选择器被忽略。请记住。