一、屬性選擇器
-
Element[attr]只使用屬性名，但沒有確定任何屬性值
p[cxy]{background: red;color: white;} -
Element[type="text"]指定屬性名，并指定了該屬性的屬性值
p[cxy=html]{background: red;color: white;} p[cxy='css']{background: red;color: white;} -
Element[attr~="value"]指定屬性名，屬性值是一個(gè)列表，并且以空格隔開，其中列表中包含了一個(gè)value詞
<p cxy='html test'>html</p> // 包含有html的元素 p[cxy~=html]{color: yellow;} // p[cxy=html]{color: yellow;} 這是獲取不到對(duì)應(yīng)元素的 -
Element[attr^="value"]指定了屬性名，并且有屬性值，屬性值是以value開頭的
<p cxy='javascript'>javascript</p> <p cxy='jquery'>jquery</p> // 以j開頭的元素 p[cxy^=j]{ color: yellow; } -
Element[attr$="value"]指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的
// 以s結(jié)尾的元素 p[cxy$=s]{ color: blue; } -
Element[attr*="value"]指定了屬性名，并且有屬性值，而且屬值中包含了value
// 只要是包含css的元素 p[cxy*=css]{ color: black; } -
Element[attr|="value"]指定了屬性名，并且屬性值是value或者以“value-”開頭的值（比如說zh-cn）
// 以'z-'開頭的屬性，或?qū)傩詾?z'的元素 p[cxy|=z]{ color: black;}案例: 百度文庫(kù)
二、結(jié)構(gòu)性偽類選擇器
- Element:nth-child(n) 表示Element父元素中的第n個(gè)字節(jié)點(diǎn)
p:nth-child(odd){background:red} // 匹配奇數(shù)行 p:nth-child(even){background:red} // 匹配偶數(shù)行 p:nth-child(2n){background:red} // 偶數(shù) p:nth-child(1){ background: red;} // 第一元素p:nth-child(1){ background: red;}指找p標(biāo)簽父級(jí)下的第一個(gè)子元素，并且這個(gè)元素是p標(biāo)簽
<body>
<p> 1、星期一 </p>
<h1> 測(cè)試 </h1>
</body>
-
Element:nth-last-child(n) 表示Element父元素中的第n個(gè)字節(jié)點(diǎn)，從后向前計(jì)算
p:nth-last-child(1){ background: red;} // 最后一個(gè)元素 -
Element:nth-of-type(n) 表示Element父元素中類型為Element的第n個(gè)字節(jié)點(diǎn)
p:nth-of-type(2){background: red;} // 找p標(biāo)簽父級(jí)下的第二個(gè)p -
Element:nth-last-of-type(n)表示Element父元素中的第n個(gè)字節(jié)點(diǎn)，且類型為Element，從后向前計(jì)算
p:nth-last-of-type(2){background: red;} // 找p標(biāo)簽父級(jí)下的倒數(shù)第二個(gè)p -
Element:first-child 表示Element元素中的第一個(gè)子節(jié)點(diǎn)
h1:first-child{ background: red;} // 等同于p:nth-child(1) -
Element:last-child 表示Element元素中的最后一個(gè)子節(jié)點(diǎn)
h1: last-child{ background: red;} // 等同于p:nth-last-child(1) -
Element:first-of-type 表示Element父元素中的第一個(gè)子節(jié)點(diǎn)且節(jié)點(diǎn)類型是Element的
h1:first-of-type{background: red;} // 等同于nth-of-type(1) -
Element:last-of-type 表示Element父元素中的最后一個(gè)子節(jié)點(diǎn)且節(jié)點(diǎn)類型是Element的
h1:last-of-type{background: red;} // 等同于nth-last-of-type(1)
三、偽類選擇器
-
E:target 表示當(dāng)前的URL片段的元素類型，這個(gè)元素必須是E
// http://127.0.0.1:8020/test.html#view1 div:target{ display: block; } // url中的hash值 -
E:disabled 表示不可點(diǎn)擊的表單控件
input: disabled{color: red;} -
E:enabled 表示可點(diǎn)擊的表單控件
input: enabled{color: gray;} -
E:checked 表示已選中的checkbox或radio
input:checked{ width: 50px; height: 50px; }案例: 改變單選框/復(fù)選框樣式
-
E:first-line 表示E元素中的第一行
p:first-line{ color: red; } -
E:first-letter 表示E元素中的第一個(gè)字符
p:first-letter{font-size: 30px;} -
E::selection表示E元素在用戶選中文字時(shí)
p::selection{ background: red;color: white; } -
E::before 生成內(nèi)容在E元素前
p:before{ content: '你是誰啊?'; display: block;} -
E::after 生成內(nèi)容在E元素后
p: after{ content: '你是誰啊?'; display: block;} -
E:not(s) 表示E元素中，s元素不被匹配
// p元素中，元素名為.view2的不被匹配到 p:not(.view2){ color: blue;} -
E~F表示E元素毗鄰的F元素(即E元素之后的)
p~h1{ background: red;} // p后面的h1元素才生效 -
Content 屬性
p: after{ content: '你是誰啊?'; }
四、子元素選擇器
不希望選擇任意后代，縮小范圍，只選擇某個(gè)元素的子元素，即可以使用子元素選擇器；
- E1 > E2 表示E1的子元素中所有的E2
// 即h1子元素的所有strong h1 > strong {color:red;}
五、相鄰兄弟選擇器
- E1 + E2 表示E1元素后面的E2(E1和E2父元素一致)
h1 + p {margin-top:50px;}
