去年我学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上有关该挑选器的详尽解释和案例。