css 中两个class之间没有空格与有空格有什么区别

[guotie]

例如： .ui.item {....}

和 .ui .item {....}

还有 .ui > .item {....}


thx

[alexrezit]

'x y' 是选择 x 下面所有 y.
'x > y' 是选择 x 下面第一层 child element 中的 y.

至于连着写好像是同时符合多个的, 不太清楚.

[luikore]

没空格是交集, 有空格是先后代关系

[luikore]

http://semantic-ui.com/ 就是用交集法的, 选择器比 bootstrap 好看很多

[dorentus]

详情：
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
http://www.w3.org/TR/css3-selectors/#selectors

[learnshare]

第一个匹配： <div class="ul item"></div>；无法匹配：<div class="ul"></div> 和 <div class="item"></div>；
第二个匹配：<div class="ul"><div class="item"></div></div> 中间的 div；
第三个匹配：<div class="ul"><div class="item"></div></div> 中间的 div；无法匹配：<div class="ul"><div class="abc"><div class="item"></div></div></div>。

三个的区别是：
规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；
规则 .ul .item 匹配 class 属性包含 ul 的元素中 *任意的* class 属性包含 item 的元素（二者是祖先元素与后代元素的关系）；
规则 .ul > .item 匹配 class 属性包含 ul 的元素的子元素中 class 属性包含 item 的元素（二者是父元素与子元素的关系，在相邻的层）。

参考： https://github.com/LearnShare/blog/blob/master/posts/drafts/css/css_selectors.md

[learnshare]

@luikore 我也不喜欢 Bootstrap 的 class 声明，太繁琐

[ray1980]

@learnshare 这三个对浏览器支持怎么样？ie6支持么？

[Keinez]

@ray1980 不支持>，不过IE6已死，放心用。作为国内用户群最庞大的渣站之一，人人早在数年前就这么写了。

[learnshare]

@Keinez +1 > 是 CSS3 选择器模块中的规则，IE6 应该无效。不过做一个提示 IE6 升级的功能，比兼容它要容易。

[Keinez]

@learnshare 错了，那是CSS2的特性……

[Keinez]

http://kimblim.dk/css-tests/selectors/

不同版本的selectors支持列表。

[learnshare]

@Keinez 对，是 CSS2...