CSS后代选择器,子选择器和相邻兄弟选择器

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

1，后代选择器和子选择器区别：

①写法不一样：
后代选择器的标识为：空格     
    如：ul li{width:150px;} 【ul和li之间用空格隔开】
子选择器的标识为：>
    如：ul>li{width:150px;}【ul和li之间用>隔开】
相邻兄弟选择器的标识为：+
    如：h1 + p {margin-top:50px;}［h1和p之间用+隔开］

②功能不一样：
后代选择器(descendant selector），又称为包含选择器，可以选择某元素后代的元素（子子孙孙元素），如上例，后代选择器是选择ul包围的所有元素中的所有li元素，包括儿子元素、孙子元素、曾孙元素等等等。
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素儿子元素的元素，子选择器仅仅选择ul包围的儿子元素中的 li元素，不包括孙元素、曾孙元素等等等。
相邻兄弟选择器很好理解，即选择紧接在另一元素后的元素，且二者有相同父元素。

③兼容性不一样：
后代选择器主流浏览器都兼容。
子选择器和相邻兄弟选择器在IE6是不被支持的选择器，会出bug！

2，后代选择器，子选择器和相邻兄弟选择器结合使用示例：

请看下面这个选择器：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的第一个相邻兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

转载于:https://www.cnblogs.com/iceflorence/p/5796537.html