css挑选器(selector) xPath的挑选器

2021-03-11 06:34 jianzhan

年我学jQuery的情况下,以前做过1点挑选器(selector)的笔记。

这几日拿出看来了1下,发现许多都忘掉了。因此,我决策把它们贴在这里,便捷之后查询。这对别的盆友应当也是有效的,终究挑选器是制做网页页面实际效果的第1步。

笔记分成两个一部分,今日是CSS的挑选器,之后也有1一部分xPath的挑选器。今日的笔记中包含44个挑选器,基础涵盖了CSS 2和CSS 3的全部要求。

=====================

CSS挑选器笔记

1、基础挑选器

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

案例:

拷贝编码
编码以下:

* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
p.info { background:#ff0; }
p.info.error { color:#900; font-weight:bold; }
#info { background:#ff0; }
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

案例:

拷贝编码
编码以下:

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }
div > strong { color:#f00; }
p + p { color:#f00; }

3、CSS 2.1 特性挑选器

编号 挑选器 含意 9. E[att] 配对全部具备att特性的E元素,不考虑到它的值。(留意:E在此处能够省略,例如“[cheacked]”。下列同。) 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”这些

案例:

拷贝编码
编码以下:

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
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元素

案例:

拷贝编码
编码以下:

p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }
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元素以后插进转化成的內容

案例:

拷贝编码
编码以下:

p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 ⑴8px; }
a:link:after { content: " (" attr(href) ") "; }

6、CSS 3的同级元素通用性挑选器

编号 挑选器 含意 24. E ~ F 配对任在哪E元素以后的同级F元素

案例:

拷贝编码
编码以下:

p ~ ul { background:#ff0;}

7、CSS 3 特性挑选器

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

案例:

拷贝编码
编码以下:

div[id^="nav"] { background:#ff0;}

8、CSS 3中与客户页面相关的伪类

编号 挑选器 含意 28. E:enabled 配对表单中激活的元素 29. E:disabled 配对表单中禁用的元素 30. E:checked 配对表单中被选定的radio(单选框)或checkbox(复选框)元素 31. E::selection 配对客户当今选定的元素

案例:

拷贝编码
编码以下:

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个不包括任何子元素的元素,留意,文字连接点也被看做子元素

案例:

拷贝编码
编码以下:

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; }

10、CSS 3的反选伪类

编号 挑选器 含意 43. E:not(s) 配对不符当今挑选器的任何元素

案例:

拷贝编码
编码以下:

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

101、CSS 3中的 :target 伪类

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

请参看HTML DOG上有关该挑选器的详尽解释和案例。