css - “#id li{...}”和“#id > li{...}”之间的区别

Question

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

Answer 1

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

#id li

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

#id > li

Answer 2

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将仅针对作为 id 为容器的 div 的直接子级的 uls。例如，它不会针对作为第一个 li 的孩子的 ul。

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

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

Answer 3

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

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

E > F ... E 元素的 F 元素子元素 ...子组合子

和：

EF ... E 元素的 F 元素后代 ...后代组合子

请注意，这种差异并不是 IE7 所特有的。所有体面的现代浏览器都支持这两种语法。CSS2中也存在相同的选择器。在quirksmode上，我只看到 IE6 及更低版本 (*shudder*) 与子选择器有问题。