資訊專欄INFORMATION COLUMN
摘要：對(duì)于一個(gè)前端，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。
對(duì)于一個(gè)前端er，選擇器是日常生活中必須接觸的部分，這篇文章主要探討一下選擇其的分類及一些小技巧。
【分類】
1.基礎(chǔ)選擇器
2.結(jié)構(gòu)選擇器
3.偽類選擇器
4.偽元素
5.屬性選擇器
【描述】
1.基礎(chǔ)選擇器（瀏覽器都兼容）
* 通配符 （可以匹配元素中所有的html元素）
如：*{color:#000;}則代表將頁(yè)面全部元素添加屬性為#000的顏色值；
E 元素選擇器（匹配特定的標(biāo)簽）
如：a{text-decoration:underline;}則代表將頁(yè)面所有的a標(biāo)簽設(shè)置下劃線；
#id ID選擇器（匹配頁(yè)面特定的id）
如：#my{color:#000}則代表將頁(yè)面id為my的元素添加屬性為#000的顏色值；
.class 類選擇器（匹配頁(yè)面特定的class）
如：.my{color:#000}則代表將頁(yè)面class為my的元素添加屬性為#000的顏色值；
S1,S2 群組選擇器（匹配包含S1，包含S2元素，匹配一個(gè)即可）
如：.my,.you{color:#000}則代表將頁(yè)面class為my和class為you的元素添加屬性為#000的顏色值；
S1S2 合并選擇器（匹配包含S1及S2的元素，該元素同時(shí)必須包含S1及S2）
如：.my.you{color:#000}則代表將頁(yè)面class有my及you的元素添加屬性為#000的顏色值；
2.結(jié)構(gòu)選擇器
S1 S2 后代選擇器（S1所有的后代S2） S1>S2 子選擇器（S1的子元素S2 IE7+） S1+S2 相鄰兄弟選擇器（S1后面的相鄰兄弟元素S2 IE7+） S1~S2 通用兄弟選擇器（S1后面的所有兄弟元素S2，IE7+）
【舉例圖示】
a.區(qū)分S1 S2及S1,S2及S1S2三類選擇器；
you and meyoume you
.me,.you{
color: deeppink;
}
.you.me{
background: #eee;
}
.me .you{
color: #0f0;
}
添加如上結(jié)構(gòu)及樣式，可得到下面的效果:
可以看出來(lái).me,.you群組選擇器即只要包含了任意一個(gè)即可生效；.me .you后代選擇是只有.me的后代.you才會(huì)生效，.me.you合并選擇器，是需要兩個(gè)選擇器都包含才會(huì)生效。
b.區(qū)分各類兄弟選擇器
son1son2son3son4son other
.parent >.son{
color: #0f0;
}
.son1 + .son{
text-align: center;
}
.son1 ~ .son{
background: #eee;
}
添加如上結(jié)構(gòu)及樣式，可得到下面的效果:
3.偽類選擇器
動(dòng)態(tài)偽類選擇器
:link
:visited
:acitve(IE8+)
:hover
:focus(IE8+)
目標(biāo)偽類選擇器
:target(IE9+)
語(yǔ)言偽類選擇器
:lang(language)
ui元素狀態(tài)偽類選擇器（IE9+）
:checked 選中態(tài)
:enabled 啟用態(tài)
:disabled 禁用態(tài)
結(jié)構(gòu)偽類選擇器(IE9+)
:first-child
:last-child
:root
:nth-child(n) odd even
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:first-of-type
:last-of-type
:only-child
:only-of-type
:empty
n的場(chǎng)景 n n*length n+length -n+length n*length+b odd even
否定偽類選擇器
:not (IE9+)
【舉例圖示】
以上偽類選擇器，結(jié)構(gòu)偽類選擇器在日常效果中應(yīng)用最為廣泛，應(yīng)用恰當(dāng)可以得到很多意想不到的效果。【具體效果會(huì)另開文章再更新】
4.偽元素
::first-letter 第一個(gè)字母 ::first-line 第一行文本 ::before 在元素前插入內(nèi)容，但不會(huì)生成dom，可以設(shè)置樣式【會(huì)在下篇文章補(bǔ)充說(shuō)明】 ::after 在元素后插入內(nèi)容，但不會(huì)生成dom，可以設(shè)置樣式，常用于清除浮動(dòng)【會(huì)在下篇文章補(bǔ)充說(shuō)明】
5.屬性選擇器【IE7+】
E[attr] 匹配具有屬性attr的元素E E[attr=val] 匹配屬性attr為val的元素E E[attr|=val] 以val 或者val-開頭 E[attr~=val] 屬性值要包含val這個(gè)屬性 E[attr*=val] 屬性值中有val這個(gè)字符串就可以 E[attr^=val] 以val開頭 E[attr$=val] 以val結(jié)束
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/112638.html
摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
閱讀 1843·2021-10-13 09:39
閱讀 1395·2019-08-30 13:58
閱讀 1491·2019-08-29 16:42
閱讀 3625·2019-08-29 15:41
閱讀 3048·2019-08-29 15:11
閱讀 2665·2019-08-29 14:10
閱讀 3498·2019-08-29 13:29
閱讀 2155·2019-08-26 13:27
