1
alexrezit 2013-10-18 18:47:17 +08:00 1
'x y' 是选择 x 下面所有 y.
'x > y' 是选择 x 下面第一层 child element 中的 y. 至于连着写好像是同时符合多个的, 不太清楚. |
2
luikore 2013-10-18 19:12:49 +08:00 1
没空格是交集, 有空格是先后代关系
|
3
luikore 2013-10-18 19:13:55 +08:00 1
http://semantic-ui.com/ 就是用交集法的, 选择器比 bootstrap 好看很多
|
4
dorentus 2013-10-18 19:41:19 +08:00 1
|
5
learnshare 2013-10-18 20:21:50 +08:00 1
第一个匹配: <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 |
6
learnshare 2013-10-18 20:23:17 +08:00
@luikore 我也不喜欢 Bootstrap 的 class 声明,太繁琐
|
7
ray1980 2013-10-18 23:08:13 +08:00 via Android
@learnshare 这三个对浏览器支持怎么样?ie6支持么?
|
8
Keinez 2013-10-19 02:50:25 +08:00 via Android
@ray1980 不支持>,不过IE6已死,放心用。作为国内用户群最庞大的渣站之一,人人早在数年前就这么写了。
|
9
learnshare 2013-10-19 09:29:42 +08:00
@Keinez +1 > 是 CSS3 选择器模块中的规则,IE6 应该无效。不过做一个提示 IE6 升级的功能,比兼容它要容易。
|
10
Keinez 2013-10-19 10:47:53 +08:00 via Android
@learnshare 错了,那是CSS2的特性……
|
11
Keinez 2013-10-19 10:54:57 +08:00 via Android
|
12
learnshare 2013-10-19 14:33:43 +08:00
@Keinez 对,是 CSS2...
|