css的高级选择器

css的高级选择器应该要慎重使用，因为它有可能会带来浏览器兼容性的bug，对于HTML中一些重要的元素上要尽量使用更为稳妥的选择器。记得之前在某电商写代码时用了一个nth-child()选择器，结果测试时发现在IE8上出现了一些样式没有给到，原因就是nth-child()选择器只能兼容到IE8以上，不包括IE8。

高级选择器包括以下几种

1. 子选择器
2. 相邻同胞选择器
3. 属性选择器

后代选择器选择一个元素的所有后代，而子元素选择器只选择元素的直接后代，也就是子元素。

比如

.view>p

 

它只选择的是子节点p元素并不包括所有后代p元素，这个选择器能兼容到IE7基本还是比较好用的，但是IE7有个小坑，父亲元素和子元素之间如果有HTML注释，则会出现兼容性BUG。

相邻同胞选择器，兼容性和子元素选择器一致。写法是这样的：

.view+p 

这个代表在.view元素后面的p元素，p不是.view的后代，而是兄弟节点。

属性选择器，选择的是含有某个属性的某个元素，比如下面的这种：

<acronym title="World Wide Web Consortium">WWWC</acronym>  
acronym[title] {
    XXX
}

上句的选择器就是选择了含有title属性的acronym元素。
还有nth-child系列等。

未完待续，参考链接