发觉CSS选择器用的实在是太平凡了…一直犹豫国内大量使用IE,致使很多初级前端开发人员对于很多CSS3的选择器比较陌生,这里我参考各方的文档及相关经验来总结一下CSS选择器的相关知识.
CSS 2.1 选择器:
通配符选择器
匹配任意元素,不建议使用,除非做DEMO测试之类
类型选择符
一般来说就是常用的html标签 (div , p , a)
后代选择符
选择所有被XX包含的xxx (div a , ul li)
子代选择符
选择XX元素子级第一级的元素xxx,切记是第一级 (div > p)
相邻选择符
同级两个元素中第二个元素生效比如: XX和xx同级且相邻,那么XX + xx中的xx样式生效,看糊涂了吗哈哈哈(h1 + p)
伪类和伪元素选择符
包括:link, :visited, :hover, :focus, :active, :first-child, :lang(), 其实一般也就用到a标签的hover,偶尔为了提高用户体验加个a的visited~再就是除了IE兼容较差的first-child了
类选择符
就是class里面的xx没什么好说的了吧 (.xx , .xxx , .header)
ID选择符
同类选择符格式用id,优先级不同罢了,一般来说除非特别重要的会用来写进样式,不建议使用.( #xx , #xxx , #page)
属性选择符
这个CSS2的比较简单,只有几种写法,我就不一一列举了
CSS 3 选择器:
Following-sibling combinator
不知道怎么翻译,就是 XX ~ xx, XX和xx同级,且xx在XX后面的全都有效
属性选择符
CSS3版的这个花招太多了…我懒得写简单说就是含有某个属性的标签才拥有的样式,自己去查下面的分享资料啦~(a[title] , img[alt])
nth-child
这有很多写法…
还有些应用于表单的:enabled, :checked…由于时间关系就不都写详细用法了.
作为活雷锋的人物,一次又一次把流量引走了.我不后悔,请看W3CSCHOOL的表格,CSS 选择器参考手册
一般支持css3的浏览器中,对于css2.1里的属性选择器兼容比较好,可以尝试了解一下,对于做页面帮助很大.我随便举几个例子:
a[href$=”.pdf”] (选择a元素中href属性值内带有.pdf并以此结尾的标签)
img[alt^=”figure”] (选择img元素内含有alt属性,并以figure开始的标签)
还有很多,其实跟正则写法有一定关系.大家自行研究
最后关于各个版本的选择器兼容性,可以看下面分享第三条.也就是说,并不是IE6,7,8不支持CSS3就完了,甚至连CSS2很多都支持不好,例如first-child这种,我这里就不多说了.
最后分享几个好东西,从第一个开始逐步增加难度…若是入门当然看第一条就够了,简单清晰
- CSS 教程
- 来自smashingmagazine的CSS3 Cheat Sheet (PDF)和CSS3 Quick Reference Guide (GIF)
- CSS选择器兼容性表电脑终端和移动终端
- css2速查表
- 入门版30个需要牢记的CSS选择器
- W3C官方CSS2.1选择器文档
- 高级文档Selectors Level 4
好了,暂时就分享这么些东西了.更多的还是要熟练使用,多多记忆才好.
本来想写一个超级无敌完整的,发现完全没精力,就写这点东西花了2个多小时,眨眼便是晚上11点多了.不行要休息了.大家多多看我的分享好了~
