- 首先列舉各種選擇器, 之后描述作用以及個(gè)人認(rèn)為有坑的地方
- 叫法這個(gè)東西并不是唯一的, 自己能記住和理解怎么回事就行,一個(gè)名字而已
- E,F并不單單指元素, 也可以是類,或ID
- 描述如果不形容的不夠通俗, 下面會(huì)有大白話, 有圖有XX
- 我不是專業(yè)前端但是對前端感興趣, 有不對的地方歡迎指正
(一) 元素選擇器
| 元素選擇器 | 含義 |
|---|---|
| E | 標(biāo)簽選擇器 |
| E#id | ID選擇器 |
| E.class | 類選擇器 |
| * | 通配選擇器 |
(二) 關(guān)系選擇器
關(guān)系選擇器 | 名稱 | 描述
--- |---
E F | 選中E元素的所有后代元素
E,F | 同時(shí)選中E元素和F元素
E>F | 只選中第一代后代元素(只有兒子可以, 孫子不行)
E+F | 只選中E元素同級(jí)的下一個(gè)元素
E~F | 只選中E后面的F元素
(三) 屬性選擇器
| 屬性選擇器 | 描述 | |
|---|---|---|
E[attr] |
選擇有屬性attr的E元素 |
|
E[attr='val'] |
選擇有attr屬性值為val的E元素 | |
E[attr^='val'] |
選擇attr屬性值以val開頭的E元素 | |
E[attr$='val'] |
選擇attr屬性值以val結(jié)尾的E元素 | |
E[attr*='val'] |
選擇attr屬性值里含有val的E元素 | |
E[attr~='val'] |
選擇attr屬性值里有val的E元素, val必須是完整單詞 | |
| E[attr | ='val'] | 選擇attr屬性以val開頭的E元素, val必須是完整單詞 |
(四) 偽類選擇器
| 偽類選擇器 | 描述 |
|---|---|
a:link |
選擇未被訪問的鏈接 |
a:visited |
選擇已被訪問過的鏈接 |
a:active |
選擇活動(dòng)時(shí)的鏈接(鼠標(biāo)按下到釋放之間的時(shí)候) |
a:hover |
選擇鼠標(biāo)放上去的時(shí)候的鏈接 |
以上四種偽類選擇器目前只知道適用于a標(biāo)簽
| 偽類選擇器 | 描述 |
|---|---|
E:focus |
選擇獲取焦點(diǎn)的E元素 |
E:first-letter |
選擇E元素里的首字母(漢字的話就是第一個(gè)漢字) |
E:first-line |
選擇E元素的第一行 |
E:before |
E元素內(nèi)部的最前面插入內(nèi)容并設(shè)置樣式 |
E:after |
E元素的內(nèi)部的最后面插入內(nèi)容并設(shè)置樣式 |
E:lang(val) |
選擇lang屬性以val開頭的E元素 |
E:first-child |
選擇是其父元素的第一個(gè)子元素的E元素 |
E:last-child |
選擇是其父元素的最后一個(gè)子元素的E元素 |
E:nth-child(N) |
選擇是其父元素的第N個(gè)子元素的E元素 |
E:nth-last-child(N) |
選擇是其父元素的倒數(shù)第N個(gè)子元素E元素 |
E:only-child |
選擇是其父元素唯一的子元素的E元素 |
E:first-of-type |
選擇是其父元素的子元素里第一個(gè)E元素的E元素 |
E:last-of-type |
選擇是其父元素的子元素里最后一個(gè)E元素的E元素 |
E:nth-of-type(N) |
選擇是其父元素的子元素里的第N個(gè)E元素的E元素 |
E:nth-last-of-type(N) |
選擇是其父元素的子元素里的倒數(shù)第N個(gè)E元素的E元素 |
:root |
選擇文檔的根元素 |
:empty |
選擇沒有子元素的 |
:target |
選擇當(dāng)前活動(dòng)的元素 |
:enabled |
選擇啟用的表單元素 |
:disabled |
選擇禁用的表單元素 |
:checked |
選擇被選中的表單元素 |
:not(selector) |
選擇不是selector的元素 |
::selection |
選擇鼠標(biāo)選取的時(shí)候的元素 |
以下說一下個(gè)人覺得在使用可能有坑的地方
- 注意
E F和E>F的區(qū)別:
-
E F: 只要F是E的后代元素(無論第幾代)都被選中 -
E>F: F必須是E的第一代子元素, 也就是說, 只有兒子會(huì)被選中, 孫子都不好使!
-
E+F會(huì)只選擇E元素后面的第一個(gè)F元素(這個(gè)沒什么好說的, 不過W3C給的釋 義是E后面的所有F元素, 這是不正確的, 下面上圖)注意p2并沒有紅色的邊框 E~F:選中E后面的同級(jí)元素F
在li元素前面的p標(biāo)簽并沒有被選中
li的子元素p標(biāo)簽也沒有被選中
-
p1, p2, p3都被選中了, 說明只要在E之后的F元素就會(huì)被選中, 間隔其它的元素也無所謂
E~F
:focus: 很遺憾, 目前這個(gè)屬性在Mac OS X系統(tǒng)上的Chrome瀏覽器和Safari瀏覽器里效果并不是很好, Mac OS X系統(tǒng)上, 當(dāng)input元素獲取焦點(diǎn)的時(shí)候,系統(tǒng)會(huì)自動(dòng)給一層藍(lán)色的框, 影響了我們要的效果:first-letter: 第一個(gè)字母會(huì)被選中
-
如果是漢字的話, 第一個(gè)漢字會(huì)被選中
第一個(gè)字母被選中 - 如果句子如: I'm the first line! 這樣,
I后面的分號(hào)'也會(huì)被選中
分號(hào)也被選中
-
:first-line: 選中第一行
first-line -
:before: 在元素內(nèi)部的前面插入(:after同理)
注意控制臺(tái)里的結(jié)構(gòu) -
:nth-child(N): 是其父元素的第N個(gè)子元素, 注意這里的N從1開始數(shù)!
nth-child -
:only-child: 其父元素的唯一子元素, 也就是說, 選中的這個(gè)元素, 它的父元素必須只能有選中的這個(gè)元素這個(gè)唯一的一個(gè)字元素, 不能再有其它子元素, 就是它的父元素不能有二胎! 它就是獨(dú)苗!
沒有二胎的 :nth-of-child(N): 這個(gè)沒什么好說的, 和:nth-child(N)類似, 注意 N也是從第一個(gè)開始數(shù), 也就是說, 想選擇第一個(gè)就寫成::nth-of-child(1):root: 選擇文檔的根元素, 實(shí)際就是html標(biāo)簽:empty: 選擇沒有子元素的,這個(gè)有幾個(gè)地方需要注意一下
- 空格是不可有的
-
換行也是不可以有的
原效果
有空格
有換行
-
:target: 選擇當(dāng)前活動(dòng)的元素, 這個(gè)選中的對象相當(dāng)于a標(biāo)簽的錨點(diǎn),只有點(diǎn)擊了鏈接以后, 這個(gè)屬性就被激活了, 然后CSS效果才會(huì)有效. 另外就是, 刷新頁面也是沒用的, 這個(gè)鏈接你訪問過, 刷新以后仍然處于激活狀態(tài), 所以樣式依然有效
-
::selection: 選擇鼠標(biāo)選取的時(shí)候的元素
> 就相當(dāng)于鼠標(biāo)選擇的時(shí)候, 比如要復(fù)制某些網(wǎng)頁上的文字的時(shí)候
> 另外就是這個(gè)必須以兩個(gè)冒號(hào)開頭, 否則無效.
(完)
