一波CSS选择器总结

常用的css选择器用多了,最近突发奇想,研究了一下其他选择器,感觉css的强大,让我惊叹了,看来还是要深入研究研究,不能只停留在几个常用的方式上。ps:顺序没有先后,大部分是CSS3新增的,纯属研究,使用需结合实际情况。

1.  :target——CSS3新增,这是需要a标签锚链接方式激活的选择器,当点击相应的锚链接,会突出显示被激活的锚点,锚点设置为自身(非a标签)时,可以实现选中高亮效果;看起来可以摆脱js的控制,直接css来设置高亮选中效果了。但是,思考了半天,貌似初始化无法实现高亮,这个选择器必须点击后才能激活,所以如果是带有初始选中样式的页面,还是要配合js的。如果不加标签,直接写在文档中书写":target{xxxx}",则是一个全局使用的样式。 浏览器支持情况: 除了IE8及以前版本,其他主流均支持。

2.  :not(selector)——CSS3新增,用于排除相应selector元素在外设置样式,selector可以是任何合法的css选择器包括:last-child这种伪类选择器,测试过程没发现异常,对于特殊需求样式,还是很有用的。浏览器支持情况:IE9+ ,其他主流均支持。

3.  A + B——一个很久就存在的,紧邻兄弟选择器,选择兄弟节点的,相信很多人都已经使用过了,唯一要注意的就是,必须是紧挨着的兄弟元素,才会被选出来。浏览器支持情况: IE7+ , 其他主流均支持,呃,应该算是全支持了吧,IE7现在应该很少了吧,没调查过。

4. A ~ B——CSS3新增,一片兄弟选择器,这么说是为了和上面的有个区分,这个选择器是就是选择符合条件的所有兄弟,不管你是不是紧挨着我,只要是兄弟,都来。测试发现,如果是很规则的列表或表格,以上两个选择器效果是一样的。原理想一下就明白,很规则,代表紧邻的数量都一致,当然两个选择器会达到同样的效果。浏览器支持情况: IE7+ , 其他主流均支持。

5. :lang(flag)——这是个语言伪类选择器,也是很久就有的,可以对使用特定语言的元素设置不同样式,只要支持lang属性的元素,都可以使用,flag是语言代码。不过测试发现,flag随便写,只要文档里有对应的lang属性值,也是可以选择到的,当然,还是尊重标准为好。浏览器支持情况: IE8+ , 其他主流均支持。

以上是5个选择器总结,不对或不妥的地方,欢迎大牛们指正,不胜感激!

猜你喜欢

转载自blog.csdn.net/qq_38047742/article/details/81938213