CSS选择器学习攻略

2020-05-07 06:29:34易采站长站整理

九、CSS 3中的结构性伪类
序号 选择器 含义
32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child
或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type
或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

实例:

CSS Code复制内容到剪贴板

p:nth-child(3) { color:#f00; }   
p:nth-child(odd) { color:#f00; }   
p:nth-child(even) { color:#f00; }   
p:nth-child(3n+0) { color:#f00; }   
p:nth-child(3n) { color:#f00; }   
tr:nth-child(2n+11) { background:#ff0; }   
tr:nth-last-child(2) { background:#ff0; }   
p:last-child { background:#ff0; }   
p:only-child { background:#ff0; }   
p:empty { background:#ff0; }  

十、CSS 3的反选伪类
序号 选择器 含义
43. E:not(s)  匹配不符合当前选择器的任何元素

 实例:

CSS Code复制内容到剪贴板

:not(p) { border:1px solid #ccc; }  

十一、CSS 3中的 :target 伪类
序号 选择器 含义
44. E:target 匹配文档中特定"id"点击后的效果

关于选择器使用的一些建议

CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间。
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序: