本篇文章給大家分享的是有關(guān)你應(yīng)該知道的30個(gè)css選擇器分別是哪些呢,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說(shuō),跟著小編一起來(lái)看看吧。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:國(guó)際域名空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、寬城網(wǎng)站維護(hù)、網(wǎng)站推廣。
1.*
代碼如下:
* {
margin: 0;
padding: 0;
}
對(duì)于初學(xué)者,在學(xué)習(xí)更多高級(jí)選擇器之前,最先了解的選擇器。
星號(hào)選擇器將匹配頁(yè)面里的每一個(gè)元素。很多開(kāi)發(fā)者使用這個(gè)技巧將外邊距和內(nèi)邊距重置為零。雖然在快速測(cè)試時(shí)這確實(shí)很好用,但我建議你永遠(yuǎn)不要再生產(chǎn)代碼中使用它。它給瀏覽器帶來(lái)大量不必要的負(fù)擔(dān)。
* 也能作為子選擇符使用。
代碼如下:
#container * {
border: 1px solid black;
}
這將匹配#container div的每一個(gè)后代元素。再次強(qiáng)調(diào),盡量不要使用這種技術(shù)。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
2.#X
代碼如下:
#container {
width: 960px;
margin: auto;
}
井號(hào)前綴允許我們選擇id。這是最常見(jiàn)的用法,不過(guò)應(yīng)該慎重使用ID選擇器。
反復(fù)問(wèn)自己:我一定需要id來(lái)匹配要選擇的元素嗎?
id選擇符是唯一的,不允許重復(fù)使用。如果可能的話,先嘗試使用一個(gè)標(biāo)簽名稱,一個(gè)新的HTML5元素,甚至是一個(gè)偽類。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
3. .X
代碼如下:
.error {
color: red;
}
現(xiàn)在介紹的是類選擇符。id和類的不同之處在于后者可以多次使用。當(dāng)你想給一組元素應(yīng)用樣式的時(shí)候可以使用類選擇符。另外,當(dāng)你緊想給特殊元素應(yīng)用樣式的時(shí)候才使用id。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
4. X Y
代碼如下:
li a {
text-decoration: none;
}
下一個(gè)最常用的選擇符是后代選擇符。當(dāng)你需要給你的選擇符增加特殊性的時(shí)候你可以使用。例如,如果你只想匹配無(wú)序列表下的錨元素?此時(shí)后代選擇符派上用場(chǎng)。
小貼士——如果你的選擇符看起來(lái)像這樣 X Y Z A B.error,那你就錯(cuò)了。時(shí)刻問(wèn)自己使用這高的權(quán)重是否有必要。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
5. X
代碼如下:
a { color: red; }
ul { margin-left: 0; }
如果你想匹配頁(yè)面上的所有的元素,根據(jù)他們的類型,而不是id或類名?顯而易見(jiàn),使用類型選擇符。如果你需要選擇所有的無(wú)序列表,請(qǐng)使用ul {}。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
6. X:visited and X:link
代碼如下:
a:link { color: red; }
a:visted { color: purple; }
我們使用:link 偽類選擇符選擇所有已經(jīng)被點(diǎn)擊過(guò)的錨標(biāo)簽。
此外,我們也有:visited偽類選擇符,正如你期望的,允許我們僅給頁(yè)面上被點(diǎn)擊過(guò)的或被訪問(wèn)過(guò)的錨標(biāo)簽應(yīng)用樣式。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
7. X + Y
代碼如下:
ul + p {
color: red;
}
這被稱作相鄰選擇符。它將只選擇緊貼在X元素之后Y元素。上面的例子,僅每一個(gè)ul之后的第一個(gè)段落元素的文本為紅色。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
8. X > Y
代碼如下:
div#container > ul {
border: 1px solid black;
}
X Y和X > Y之間的不同點(diǎn)是后者只選擇直接子代。例如,考慮如下的標(biāo)記。
代碼如下:
選擇符#container > ul將只選擇id為container的div的直接子代ul。它不匹配更深層的li的子代的ul。
因此,使用子代選擇符有性能上的優(yōu)勢(shì)。事實(shí)上,這同樣適用于基于css選擇器的javascript引擎。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
9. X ~ Y
代碼如下:
ul ~ p {
color: red;
}
這是兄弟選擇符和X + Y一樣,然而,它沒(méi)有約束。與相鄰選擇符(ul + li)僅選擇前一個(gè)選擇符后面的第一個(gè)元素比起來(lái),兄弟選擇符更寬泛。它會(huì)選擇,我們上面例子中更在ul后面的任何p元素。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
10. X[title]
代碼如下:
a[title] {
color: green;
}
被稱為屬性選擇器,在我們上面的例子里,這只會(huì)選擇有title屬性的錨標(biāo)簽。沒(méi)有此屬性的錨標(biāo)簽將不受影像。但如果你需要更多的特性怎么辦呢?呵呵……
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
11. X[href=foo]
代碼如下:
a[] {
color: #1f6053; /* nettuts green */
}
上面的代碼段將給所有href屬性為http://net.tutsplus.com的錨標(biāo)簽添加樣式;他們將會(huì)顯示為我們的品牌綠色。所有其他的錨標(biāo)簽將不受影響。
注意我們將href值用引號(hào)包裹。記住,當(dāng)使用javascript的css選擇符引擎時(shí)也這么做。如果可能的話,盡可能使用css3選擇符代替非官方的方法。
這工作的很好,但有點(diǎn)不夠靈活。如果鏈接確實(shí)直接連接到Nettus+還好,但是,也許路徑是到nettust的相對(duì)路徑呢?在這種情況下,我們可以使用一點(diǎn)正則表達(dá)式語(yǔ)法。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
12. X[href*=nettuts]
代碼如下:
a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
來(lái)了不是~這就是我們需要的代碼。*號(hào)指定了包含該屬性的值必須包含定義的值。就是說(shuō),這句代碼包含了href值為 nettuts.com,net.tutsplus.com或者tutsplus.com。
記住這個(gè)描述過(guò)于寬泛,如果是某個(gè)錨點(diǎn)標(biāo)簽鏈接到某個(gè)連接中帶有tuts非Envato的網(wǎng)站(tutsplus屬于Envato旗下網(wǎng)站)呢?因此你需要更多特性來(lái)限制,分別使用^和&來(lái)限定字符串的開(kāi)始和結(jié)束。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
13. X[href^=http]
代碼如下:
a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
有沒(méi)有想過(guò)某些網(wǎng)站是如何定義一個(gè)圖標(biāo)的鏈接的?我確定你肯定看到過(guò)。這些鏈接很容易讓你跳轉(zhuǎn)到另一個(gè)網(wǎng)站。
使用^(carat)符灰常簡(jiǎn)單啦。這個(gè)符號(hào)常常在正則表達(dá)式中表示字符串的開(kāi)始。如果我們想指向所有以”http”開(kāi)頭的”href”屬性的錨點(diǎn)的話,我們就可以使用類似于上面的那段代碼啦。
注意啦,我們不需要搜索”http://”,完全沒(méi)必要,因?yàn)槲覀冞€要包含以https://開(kāi)頭的鏈接呢。
如果我們想為所有鏈接到圖片的鏈接定義樣式咋辦?這種情況下,我們得搜索字符串的結(jié)束了不是。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
14. X[href$=.jpg]
代碼如下:
a[href$=".jpg"] {
color: red;
}
又來(lái)了,我們還是使用正則表達(dá)式符號(hào),$(dolor),來(lái)作為字符串的結(jié)束標(biāo)記。這種情況下,我們就會(huì)搜索所有url以.jpg為結(jié)尾的錨點(diǎn)啦。記住記住這種情況下gif和png格式的圖片不會(huì)被選擇哦。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
15. X[data-*=foo]
代碼如下:
a[data-filetype="image"] {
color: red;
}
回顧最近一條,我們?nèi)绾文馨鞣N圖片類型:png,jpeg,jpg,gif?很容易想到,我們能通過(guò)多個(gè)選擇器來(lái)不是,像這樣:
代碼如下:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
不過(guò),這樣很蛋疼,效率極低。另一個(gè)解決辦法是使用自定義屬性。如果我們加了一種自己的 data-filetype 屬性給每一個(gè)鏈接到圖片的錨點(diǎn)的話呢?
代碼如下:
這樣關(guān)聯(lián)后,我們就能使用標(biāo)準(zhǔn)的屬性選擇器來(lái)指定這些鏈接啦??聪旅妫?br/>
代碼如下:
a[data-filetype="image"] {
color: red;
}
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
16. X[foo~=bar]
代碼如下:
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
這兒有個(gè)鮮為人知的特殊技巧,絕對(duì)讓你印象時(shí)刻。~(tilda)符,它可以幫助我們指向那些以空格隔開(kāi)多個(gè)值的屬性的元素(真拗口,這翻譯我自己都看不懂,水平問(wèn)題)
以我們第15條的自定義屬性為例,上面的代碼中我們創(chuàng)建了 data-info屬性,這個(gè)屬性可以定義以空格分隔的多個(gè)值。這樣,這個(gè)鏈接本身就是個(gè)icon,并且指向的也是一個(gè)圖片鏈接,像下面這樣。
代碼如下:
有了這樣適當(dāng)?shù)臉?biāo)記,通過(guò)使用 ~ 屬性選擇器的技巧,我們就可以指向任何具有著兩種屬性的任何一種啦。
代碼如下:
/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
很棒,不是嗎?
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
17. X:checked
代碼如下:
input[type=radio]:checked {
border: 1px solid black;
}
這種偽類只會(huì)匹配已經(jīng)被選中的單選元素。就是這么簡(jiǎn)單。
查看例子
兼容性
•E9+
•Firefox
•Chrome
•Safari
•Opera
18. X:after
before 和 after 偽元素也很蛋疼。貌似人們每天都能找到或者發(fā)明一些新辦法來(lái)有效地使用它們。它們很容易控制選擇器周圍的內(nèi)容。
很多第一次使用是因?yàn)樗麄冃枰獙?duì)clear-fix進(jìn)行改進(jìn)。
代碼如下:
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
這個(gè)改進(jìn)使用了:after偽類元素來(lái)在元素后增加一個(gè)空間,然后清除它。這個(gè)牛X的技巧你應(yīng)該收藏到工具包里,特別是當(dāng)overflow:hidden方法無(wú)能為力的時(shí)候。
想看看其他創(chuàng)造性的用法:訪問(wèn)我滴創(chuàng)建陰影的竅門(mén)
通過(guò)Css3選擇器的標(biāo)準(zhǔn)說(shuō)明書(shū),你應(yīng)該有技巧地使用這些偽類語(yǔ)法——雙冒號(hào)::。不過(guò)為了兼容,瀏覽器會(huì)接受一個(gè)雙引號(hào)。
兼容性
•IE8+
•Firefox
•Chrome
•Safari
•Opera
19. X:hover
代碼如下:
div:hover {
background: #e3e3e3;
}
我去,這個(gè)你必須懂。典型的官方形式的用戶觸發(fā)偽類。聽(tīng)起來(lái)會(huì)有點(diǎn)迷惑,不過(guò)實(shí)際上并非如此。想在用戶在某個(gè)元素上面懸停時(shí)定義個(gè)特別的樣式?這個(gè)屬性就是做這個(gè)的。
記住啦,較old版本的IE,只能在錨點(diǎn)標(biāo)簽后使用這個(gè)hover。
這個(gè)選擇器你用得最多的情況,估計(jì)可能就是在錨點(diǎn)的懸停時(shí)加個(gè)border-bottom啦。
代碼如下:
a:hover {
border-bottom: 1px solid black;
}
小貼士: border-bottom:1px solid black;比 text-decoration:underline;好看一點(diǎn)哦。(真的?我去)
兼容性
•IE6+ (In IE6, :hover must be applied to an anchor element)
•Firefox
•Chrome
•Safari
•Opera
20. X:not(selector)
代碼如下:
div:not(#container) {
color: blue;
}
not偽類灰常有用。例如我要選擇所有的div,除了有id為container的。上面那個(gè)代碼片段就能完美的實(shí)現(xiàn)。
如果我想選擇除了p以外的所有元素,我可以這么做:
代碼如下:
*:not(p) {
color: green;
}
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
21. X::pseudoElement
代碼如下:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
我們可以使用偽元素(以::為表示)來(lái)定義元素的樣式。例如第一行,第一個(gè)字符,記住啦,這種方法只能應(yīng)用于同級(jí)元素才有效。
偽元素由兩個(gè)冒號(hào)組成:::
指定p的第一個(gè)字符的樣式
代碼如下:
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
這段代碼會(huì)找到所有段落,然后再?gòu)闹卸x這些段落的第一個(gè)字符。
這常常使用在仿報(bào)紙的文章首字母樣式。
指定p的首行樣式
代碼如下:
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
同樣,這個(gè)::first-line偽元素會(huì)像我們期望的那樣,只定義段落的第一行的樣式。
查看例子
兼容性
•IE6+
•Firefox
•Chrome
•Safari
•Opera
22. X:nth-child(n)
代碼如下:
li:nth-child(3) {
color: red;
}
想想那些沒(méi)法從元素堆中選擇元素的日子。nth-child偽類解決了這個(gè)問(wèn)題。
請(qǐng)注意 nth-child接收整數(shù)和變量,不過(guò)不是從0開(kāi)始的,如果你想選定第二個(gè)li,使用 li:nth-child(2).
我們甚至使用這個(gè)辦法來(lái)選擇任意的子元素。例如,我們可以用 li:nth-child(4n)來(lái)完成4為倍數(shù)的所有元素的選擇。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
23. X:nth-last-child(n)
代碼如下:
li:nth-last-child(2) {
color: red;
}
如果我有灰常多的li在ul里面,我只想要最后3個(gè)li怎么辦?不必使用li:nth-child(397),你可以使用nth-last-child偽類。
這種技巧和第六條幾乎一樣有效,不過(guò)兩者的不同之處在于它從結(jié)束開(kāi)始收集,用回溯的方式進(jìn)行。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
24. X:nth-of-type(n)
代碼如下:
ul:nth-of-type(3) {
border: 1px solid black;
}
你應(yīng)該有很多時(shí)候想要元素類型來(lái)選擇元素而不是通過(guò)孩子。
想象一下標(biāo)記5個(gè)無(wú)序列表(UL)。如果你想定義第三個(gè)ul,并且沒(méi)有一個(gè)唯一的id來(lái)找到它,你就可以使用 nth-of-type(3)偽類了。在上面這個(gè)代碼段中,只有第三個(gè)ul才會(huì)有黑色的邊框。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
25. X:nth-last-of-type(n)
代碼如下:
ul:nth-last-of-type(3) {
border: 1px solid black;
}
沒(méi)錯(cuò),我們一樣可以使用nth-last-of-type來(lái)從結(jié)束開(kāi)始回溯這個(gè)選擇器,來(lái)找到我們想要的元素
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
26. X:first-child
代碼如下:
ul li:first-child {
border-top: none;
}
這個(gè)結(jié)構(gòu)的偽類讓我們可以選擇某個(gè)元素的第一個(gè)子孩子。你通??梢允褂眠@個(gè)辦法來(lái)刪除第一個(gè)或者最后一個(gè)元素的邊框。
例如,你有一系列的rows,每一個(gè)都有border-top 和border-bottom。這種情況下,第一行和最后一行看起來(lái)會(huì)灰常怪。
很多設(shè)計(jì)師會(huì)使用first和last類來(lái)彌補(bǔ)這個(gè)缺陷。相反,你可以使用這些偽類來(lái)解決這些問(wèn)題。
查看例子
兼容性
•IE7+
•Firefox
•Chrome
•Safari
•Opera
27. X:last-child
代碼如下:
ul > li:last-child {
color: green;
}
與first-child相反,last-child會(huì)選擇父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。
例子:
我們建立一些例子來(lái)示范這些類的可能的用法。我們會(huì)建立一種風(fēng)格來(lái)展示。
標(biāo)記
代碼如下:
沒(méi)啥特別的,就是一個(gè)簡(jiǎn)單的序列。
Css
代碼如下:
ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}
li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}
這個(gè)樣式會(huì)設(shè)置一個(gè)背景,刪除瀏覽器默認(rèn)的ul的padding值,并定義邊框給每一個(gè)li來(lái)提供一點(diǎn)深度。
如上圖所示,唯一的問(wèn)題是最上面的邊框和最下面的邊框看起來(lái)有點(diǎn)兒怪。讓我們來(lái)使用:first-child和:last-child來(lái)解決這個(gè)問(wèn)題。
代碼如下:
li:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
看上圖,解決了不是。
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
是滴,IE8支持 first-child 不過(guò)不支持last-child。
28. X:only-child
代碼如下:
div p:only-child {
color: red;
}
實(shí)話說(shuō),你很可能會(huì)發(fā)現(xiàn)你不會(huì)經(jīng)常使用 only-child偽類。盡管如此,它確實(shí)有用,你應(yīng)該需要它。
它可以幫助你選擇是父節(jié)點(diǎn)的獨(dú)生子(沒(méi)別的孩子啦)的元素。例如,使用上面的代碼,只有是div的唯一子孩子的p段落才會(huì)定義其顏色為red。
讓我們來(lái)假定下面的標(biāo)記。
代碼如下:
My paragraph here.
Two paragraphs total.
Two paragraphs total.
這樣,第二個(gè)div的p標(biāo)簽的內(nèi)容不會(huì)被選中。只有第一個(gè)div的p才會(huì)被選中。
查看例子
兼容性
•IE9+
•Firefox
•Chrome
•Safari
•Opera
29. X:only-of-type
代碼如下:
li:only-of-type {
font-weight: bold;
}
這種結(jié)構(gòu)的偽類有幾種灰常聰明的用法。它可以選定在其父節(jié)點(diǎn)內(nèi)沒(méi)有兄弟節(jié)點(diǎn)的元素。例如,我們可以選擇只有一個(gè)li作為其子孩子的ul。
首先,取決于你想怎樣完成這一目標(biāo)。你可以使用 ul li,不過(guò),這回選擇所有l(wèi)i元素。唯一的辦法是使用only-of-type。
代碼如下:
ul > li:only-of-type {
font-weight: bold;
}
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
30. X:first-of-type
first-of-type 偽類可以讓你選擇該類型的第一個(gè)兄弟節(jié)點(diǎn)。
一個(gè)測(cè)試
為了更好地理解它,讓我們來(lái)測(cè)試一下啊??截愊旅娴臉?biāo)記到你的編輯器。
代碼如下:
My paragraph here.
現(xiàn)在,別急著往下讀,試試看如何能只選擇’LIST ITEM 2’?如果你搞定了(或者放棄了),繼續(xù)讀。
解決辦法1
有很多辦法能搞定這個(gè)測(cè)試。我們回顧其中一小部分。以使用first-of-type開(kāi)始。
代碼如下:
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
這個(gè)代碼段本質(zhì)上表示,“找到第一個(gè)無(wú)序列表,然后找到這里面的li,然后,繼續(xù)使用過(guò)濾器直到找到第二個(gè)li。
解決辦法2
另一個(gè)可行的辦法是毗鄰選擇器。
代碼如下:
p + ul li:last-child {
font-weight: bold;
}
在這個(gè)方案中,我們找到p的臨近節(jié)點(diǎn)ul,然后找到ul的li的最后一個(gè)孩子。
解決辦法3
我們可以隨心所欲滴選擇這些選擇器。
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}這次,我們?nèi)〉降谝粋€(gè)ul,然后找到第一個(gè)元素,不過(guò)是從最后一個(gè)開(kāi)始數(shù)。哈哈。
查看例子
兼容性
•IE9+
•Firefox 3.5+
•Chrome
•Safari
•Opera
結(jié)論
如果你仍在為解決old瀏覽器的缺陷而糾結(jié),如IE6。在使用這些新的選擇器方面,你仍然需要非常小心。不過(guò),別因?yàn)檫@個(gè)阻礙了你對(duì)這些新玩意兒的學(xué)習(xí)。別虐待自己。確保關(guān)注這里的兼容性列表。應(yīng)一方面,你可以使用 Dean Edward’s excellent IE9.js script 來(lái)為舊瀏覽器提供新的選擇器支持。(我去。cool)
其次,當(dāng)使用javascript庫(kù)時(shí),如流行的jQuery,最好盡可能使用這些css3本身的選擇器而不是使用庫(kù)的自定義方法/選擇器。這能讓你的代碼更快哦,因?yàn)檫@些選擇器引擎本身就能被瀏覽器解析,而不是用這些庫(kù)選擇器。
感謝閱讀,希望你能學(xué)到一兩個(gè)技巧。
譯者注
本文問(wèn)翻譯文章,原文為“The 30 CSS Selectors you Must Memorize”
以上就是你應(yīng)該知道的30個(gè)css選擇器分別是哪些呢,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。