CSS挑选器学习培训功略

2021-01-20 07:19 jianzhan

CSS挑选器基础专业知识

1、基础挑选器
编号 挑选器 含意
1. * 通用性元素挑选器,配对任何元素
2. E 标识挑选器,配对全部应用E标识的元素
3. .info class挑选器,配对全部class特性中包括info的元素
4. #footer id挑选器,配对全部id特性等于footer的元素

案例:

CSS Code拷贝內容到剪贴板
  1. * { margin:0; padding:0; }   
  2. p { font-size:2em; }   
  3. .info { background:#ff0; }   
  4. p.info { background:#ff0; }   
  5. p.info.error { color:#900font-weight:bold; }   
  6. #info { background:#ff0; }   
  7. p#info { background:#ff0; }  

2、多元化素的组成挑选器
编号 挑选器 含意
5. E,F 多元化素挑选器,另外配对全部E元素或F元素,E和F之间用逗号隔开
6. E F 子孙后代元素挑选器,配对全部属于E元素子孙后代的F元素,E和F之间用空格隔开
7. E > F 子元素挑选器,配对全部E元素的子元素F
8. E + F 紧邻元素挑选器,配对全部紧随E元素以后的同级元素F

案例:

CSS Code拷贝內容到剪贴板
  1. div p { color:#f00; }   
  2. #nav li { display:inline; }   
  3. #nav a { font-weight:bold; }   
  4. div > strong { color:#f00; }   
  5. p + p { color:#f00; }   



3、CSS 2.1 特性挑选器
编号 挑选器 含意
9. E[att] 配对全部具备att特性的E元素,不考虑到它的值
10. E[att=val] 配对全部att特性等于“val”的E元素
11. E[att~=val] 配对全部att特性具备好几个空格隔开的值、在其中1个值等于“val”的E元素
12. E[att|=val] 配对全部att特性具备好几个连字号隔开(hyphen-separated)的值、在其中1个值
以“val”开始的E元素,关键用于lang特性,例如“en”、“en-us”、“en-gb”这些

 案例:

CSS Code拷贝內容到剪贴板
  1. p[title] { color:#f00; }   
  2. div[class=error] { color:#f00; }   
  3. td[headers~=col1] { color:#f00; }   
  4. p[lang|=en] { color:#f00; }   
  5. blockquote[class=quote][cite] { color:#f00; }  


4、CSS 2.1中的伪类
编号 挑选器 含意
13. E:first-child 配对父元素的第1个子元素
14. E:link 配对全部未被点一下的连接
15. E:visited 配对全部已被点一下的连接
16. E:active 配对电脑鼠标早已其上按下、都还没释放出来的E元素
17. E:hover 配对电脑鼠标悬停其上的E元素
18. E:focus 配对得到当今聚焦点的E元素
19. E:lang(c) 配对lang特性等于c的E元素

 

案例:

CSS Code拷贝內容到剪贴板
  1. p:first-child { font-style:italic; }   
  2. input[type=text]:focus { color:#000background:#ffe; }   
  3. input[type=text]:focus:hover { background:#fff; }   
  4. q:lang(sv) { quotes"\201D" "\201D" "\2019" "\2019"; }  


5、 CSS 2.1中的伪元素
编号 挑选器 含意
20. E:first-line 配对E元素的第1行
21. E:first-letter 配对E元素的第1个字母
22. E:before 在E元素以前插进转化成的內容
23. E:after 在E元素以后插进转化成的內容

案例:

CSS Code拷贝內容到剪贴板
  1. p:first-line { font-weight:boldcolor;#600; }   
  2. .preamble:first-letter { font-size:1.5em; font-weight:bold; }   
  3. .cbb:before { content:""display:blockheight:17pxwidth:18pxbackground:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }   
  4. a:link:after { content" (" attr(href) ") "; }  


6、CSS 3的同级元素通用性挑选器
编号 挑选器 含意
24. E ~ F 配对任在哪E元素以后的同级F元素

案例:编号 挑选器 含意
25. E[att^=”val”] 特性att的值以"val"开始的元素
26. E[att$=”val”] 特性att的值以"val"末尾的元素
27. E[att*=”val”] 特性att的值包括"val"标识符串的元素

CSS Code拷贝內容到剪贴板
  1. p ~ ul { background:#ff0; }  

7、CSS 3 特性挑选器

案例:

C# Code拷贝內容到剪贴板
  1. div[id^="nav"] { background:#ff0; }  

8、CSS 3中与客户页面相关的伪类
编号 挑选器 含意
28. E:enabled  配对表单中激活的元素
29. E:disabled 配对表单中禁用的元素
30. E:checked 配对表单中被选定的radio(单选框)或checkbox(复选框)元素
31. E::selection  配对客户当今选定的元素

案例:

CSS Code拷贝內容到剪贴板
  1. input[type="text"]:disabled { background:#ddd; }  

9、CSS 3中的构造性伪类
编号 挑选器 含意
32. E:root 配对文本文档的根元素,针对HTML文本文档,便是HTML元素
33. E:nth-child(n) 配对其父元素的第n个子元素,第1个序号为1
34. E:nth-last-child(n) 配对其父元素的倒数第n个子元素,第1个序号为1
35. E:nth-of-type(n) 与:nth-child()功效相近,可是仅配对应用同种标识的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 功效相近,可是仅配对应用同种标识的元素
37. E:last-child 配对父元素的最终1个子元素,等同于于:nth-last-child(1)
38. E:first-of-type 配对父元素下应用同种标识的第1个子元素,等同于于:nth-of-type(1)
39. E:last-of-type 配对父元素下应用同种标识的最终1个子元素,等同于于:nth-last-of-type(1)
40. E:only-child 配对父元素下唯一的1个子元素,等同于于:first-child:last-child
或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 配对父元素下应用同种标识的唯11个子元素,等同于于:first-of-type:last-of-type
或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 配对1个不包括任何子元素的元素,留意,文字连接点也被看做子元素

案例:

CSS Code拷贝內容到剪贴板
  1. p:nth-child(3) { color:#f00; }   
  2. p:nth-child(odd) { color:#f00; }   
  3. p:nth-child(even) { color:#f00; }   
  4. p:nth-child(3n+0) { color:#f00; }   
  5. p:nth-child(3n) { color:#f00; }   
  6. tr:nth-child(2n+11) { background:#ff0; }   
  7. tr:nth-last-child(2) { background:#ff0; }   
  8. p:last-child { background:#ff0; }   
  9. p:only-child { background:#ff0; }   
  10. p:empty { background:#ff0; }  


10、CSS 3的反选伪类
编号 挑选器 含意
43. E:not(s)  配对不符当今挑选器的任何元素

 案例:

CSS Code拷贝內容到剪贴板
  1. :not(p) { border:1px solid #ccc; }  

101、CSS 3中的 :target 伪类
编号 挑选器 含意
44. E:target 配对文本文档中特殊"id"点一下后的实际效果

有关挑选器应用的1些提议

CSS挑选符由1些原始化主要参数构成,这些主要参数指明了要运用这个CSS标准的网页页面元素。做为1个网站的前端开发开发设计工程项目师,应当防止撰写1些普遍的花销很大的CSS挑选符方式,尽可能撰写高效率的CSS挑选符,从而加速网页页面的3D渲染速率,减少网页页面展现時间。
Google 资深web开发设计工程项目师Steve Souders对CSS挑选器的高效率从高到低做了1个排列:

1.id挑选器(#myid)2.类挑选器(.myclassname)3.标识挑选器(div,h1,p)4.邻近挑选器(h1+p)5.子挑选器(ul < li)6.子孙后代挑选器(li a)7.通配符挑选器(*)8.特性挑选器(a[rel="external"])9.伪类挑选器(a:hover,li:nth-child)

上面9种挑选器中ID挑选器的高效率是最高,而伪类挑选器的高效率则是最底。
综合性上面的次序,大家清晰的了解,id和类名用于重要挑选器上高效率是最高的,而CSS3的仿伪类和特性挑选器,尽管应用便捷,但其高效率确是最低的。

了解了基础基本原理之后,大家撰写CSS时就应当留意了。下面举几个事例,让大伙儿了解的更深入1些:
1.不必在撰写id标准时用标识名或类名

BAD
button#backButton {…}
BAD
.menu-left#newMenuIcon {…}
GOOD
#backButton {…}
GOOD
#newMenuIcon {…}

因为款式系统软件从最右侧的挑选符刚开始向左开展配对,要是当今挑选符的左侧也有别的挑选符,款式系统软件就会再次向左挪动,直至寻找和标准配对的元素,或由于不配对而撤出,因此,在button#backButton {…}中,款式系统软件先寻找id为backButton的元素,随后再次向左配对,查询该元素的标识名是否button,假如并不是,搜索下1个id为backButton的元素,再查验这个元素的标识名,这般循环往复,直至抵达文本文档结尾。假如只是#backButton {…},则款式系统软件寻找id为backButton的元素后,由于左侧沒有别的挑选符了,它就撤出而完毕搜索了。

此外,依据HTML标准,id在HTML中是唯1的,也便是说1个HTML网页页面只限制有1个id为“XX”的元素,而不限定有着这个ID元素的标识名,因此,在button#backButton {…}中,button标识彻底是不经意义的,能够,并且应当去掉,button#backButton {…}与#backButton {…}是等额的的。在#backButton前多写了button,只会引发款式系统软件向左挪动,再次搜索网页页面元素,消耗网页页面特性,增加网页页面3D渲染時间。

另外一层面,在id元素前面加上标识名,还会引发另外一个致命的难题,例如原先id为backButton的标识名是button,假如原先款式申明写成button#backButton {…},则如今必须把button标识改为input,id不会改变,则button#backButton {…}申明的款式标准在这个id一样为backButton的input元素上不起功效,不信大伙儿能够自身动手能力撰写试1下。
2.不必在撰写class标准时用标识名

BAD
treecell.indented {…}
GOOD
.treecell-indented {…} //語言化和标识名绑在1起 假定treecell
BEST
.hierarchy-deep {…} //語言化和标识名不相干

基本原理参照第1条。
3.把多层标识挑选标准用class标准更换,降低css搜索

BAD
treeitem[mailfolder="true"] > treerow > treecell {…}
GOOD
.treecell-mailfolder {…}

4.防止应用子挑选器

如今大家看来看David Hyatt的第3段话:子孙后代挑选器在CSS中是最价格昂贵的挑选器。贵得要命——特别是把它和标识或通配符放在1起!

BAD
treehead treerow treecell {…}
BETTER, BUT STILL BAD (see next guideline)
treehead > treerow > treecell {…}

标识后边最好是始终不必再提升子挑选器

BAD
treehead > treerow > treecell {…}
GOOD
.treecell-header {…}
BAD
treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon {…}
GOOD
.tree-folderpane-icon[IsImapServer="true"]  {…}

5.借助承继

BAD
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
GOOD
#bookmarkMenuItem { list-style-image: url(blah) }

最终,大家来做个总结,网站撰写CSS时,应当优先选择考虑到应用class挑选器,防止应用通配符挑选器(*)和特性挑选器(a[rel=”external”]),子孙后代挑选器与标识挑选器融合应用也应防止。应用id挑选器的特性最好是,可是撰写时要留意其唯1性,慎重应用。CSS3挑选器(比如::nth-child(n)第n个孩子)在协助大家锁住大家要想的元素的另外维持标识的整洁和词义化,但客观事实是,这些花梢的挑选器让更多的访问器資源被聚集应用。引入David Hyatt有关CSS3挑选器的阐述:假如你关注网页页面特性的话,她们真不应该被应用!