CSS后代选择器和子选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结:

1,后代选择器和子选择器区别:

①写法不一样:
后代选择器的标识为:空格
如:ul li{width:150px;} 【ul和li之间用空格隔开】
子选择器的标识为:>
如:ul>li{width:150px;}【ul和li之间用>隔开】

②功能不一样:
后代选择器(descendant selector),又称为包含选择器,可以选择某元素后代的元素,如上例,后代选择器是选择ul包围的所有元素中的所有li元素,包括儿子元素、孙子元素、曾孙元素等等等。
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素儿子元素的元素,子选择器仅仅选择ul包围的儿子元素中的 li元素,不包括孙元素、曾孙元素等等等。

③兼容性不一样:
后代选择器主流浏览器都兼容。
子选择器在IE6是不被支持的选择器,会出bug!

 

2,后代选择器和子选择器结合使用示例:

请看下面这个选择器:

table.company td > p

上面的选择器会选择作为 td 元素子元素中的所有 p 元素,同时这个 td 元素本身又是从一个class="company"的table 元素继承的。

文章来自:http://www.cnblogs.com/iceflorence/p/5796537.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3