詳解CSS樣式選擇器有哪些?

CSS選擇器就是指定CSS要作用的標(biāo)簽，那個(gè)標(biāo)簽的名稱就是選擇器。意為：選擇哪個(gè)容器。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、網(wǎng)站建設(shè)、涪城網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、涪城網(wǎng)絡(luò)營(yíng)銷、涪城企業(yè)策劃、涪城品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供涪城建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：vcdvsql.cn

CSS選擇器分類：

標(biāo)簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器

1、html標(biāo)簽選擇器：

定義：以html標(biāo)簽作為選擇器

2、class類選擇器：

定義：為HTML標(biāo)簽添加class屬性，通過(guò)類選擇器來(lái)為具有此class屬性的元素設(shè)置css樣式。

類選擇器也可以對(duì)不同類型元素的同一個(gè)名稱的類選擇器設(shè)置不同的樣式規(guī)則：

同一個(gè)元素可以設(shè)置多個(gè)類，之間用空格隔開：

3、ID選擇器

定義：為HTML標(biāo)簽添加ID屬性，通過(guò)ID選擇器來(lái)為具有此ID的元素設(shè)置CSS規(guī)則

4、群組選擇器

定義：集體統(tǒng)一設(shè)置樣式

5、全局選擇器

定義：所有標(biāo)簽設(shè)置樣式

HTML文檔結(jié)構(gòu)圖

6、后代選擇器

定義：使用后代選擇器設(shè)置，之間用空格隔開，后代選擇器可以多層。

7、偽類選擇器

鏈接的四種狀態(tài)：激活狀態(tài)，已訪問(wèn)狀態(tài)，未訪問(wèn)狀態(tài)，鼠標(biāo)懸停狀態(tài)。

偽類

說(shuō)明

:link

未訪問(wèn)的鏈接

:visited

已訪問(wèn)的鏈接

:hover

鼠標(biāo)懸停狀態(tài)

:active

激活的鏈接

:hover 用于訪問(wèn)的鼠標(biāo)經(jīng)過(guò)某個(gè)元素時(shí)；

:active 用于一個(gè)元素被激活時(shí)（即按下鼠標(biāo)之后放開鼠標(biāo)之前的狀態(tài)）

偽類選擇器的屬性：link visited hover active

說(shuō)明：

1)?a:hover 必須置于?a:link和a:visited之后，才有效

2) a:active 必須置于 a:hover之后才有效

3) 偽類名稱對(duì)大小寫不敏感

8、CSS其它選擇器

css繼承特性，從父元素那繼承部分css屬性

選擇器的優(yōu)先級(jí)

ID選擇優(yōu)先級(jí)最高（id選擇器定義具有唯一性）

class選擇器次之（class選擇器可以多個(gè)）

元素選擇器再次之

其它選擇器優(yōu)先級(jí)主要根據(jù)定義的先后順序，最后定義的優(yōu)先級(jí)高

!important 加重選擇器的優(yōu)先級(jí)，添加在樣式規(guī)則之后，中間用空格隔開。

CSS選擇器命名規(guī)則

1：采用英文字母，數(shù)字以及"-" 和 "_" 命名

2：以小寫字母開頭，不能以數(shù)字和"-"?和 "_" 開頭

3：使用有意義的命名規(guī)范

常用CSS命名

header

頁(yè)頭

main

主體

footer

頁(yè)尾

nav

導(dǎo)航

sidebar

側(cè)欄

container

容器

column

欄目

title

標(biāo)簽

menu

菜單

submenu

子菜單

*列舉常用命名，大家根據(jù)自身項(xiàng)目及團(tuán)隊(duì)的規(guī)則命名

耐心學(xué)習(xí)基礎(chǔ)知識(shí)，基礎(chǔ)是蓋房的根基，必須打結(jié)實(shí)。

如果您覺得有用，記得在下方點(diǎn)贊、關(guān)注、留言，我會(huì)定期奉 上更多的驚喜哦，您的打賞支持才是我繼續(xù)努力的動(dòng)力，么么噠。

每日分享在學(xué)習(xí)過(guò)程中總結(jié)的學(xué)習(xí)經(jīng)驗(yàn)，學(xué)習(xí)筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學(xué)習(xí)為目的，每天閱讀一篇文章，了解身邊的技術(shù)。陪有夢(mèng)想的人一起成長(zhǎng)！

css有哪些選擇器

CSS中常用的選擇器：

（一）基本選擇器（二）層次選擇器（三）動(dòng)態(tài)偽類選擇器（四）目標(biāo)偽類選擇器

（五）ui狀態(tài)偽類選擇器（六）結(jié)構(gòu)偽類選擇器（七）屬性選擇器（八）偽元素

(一)基本選擇器

1.標(biāo)簽選擇器：通過(guò)標(biāo)簽名獲取元素 權(quán)重：0001

（此種選擇器影響范圍大，建議盡量應(yīng)用在層級(jí)選擇器中。）

2.class選擇器：通過(guò) . 類名獲取元素 權(quán)重：0010

（通過(guò)class類名來(lái)選擇元素，一個(gè)類可應(yīng)用于多個(gè)元素，一個(gè)元素上也可以使用多個(gè)類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。）

3.id選擇器：通過(guò) # id名獲取元素 權(quán)重：0100

（通過(guò)id名來(lái)選擇元素，元素的id名稱不能重復(fù)，所以一個(gè)樣式設(shè)置項(xiàng)只能對(duì)應(yīng)于頁(yè)面上一個(gè)元素，不能復(fù)用，id名一般給程序使用，所以不推薦使用id作為選擇器。 ）

4. * 通配符選擇器：獲取到頁(yè)面的所有元素

5.群組選擇器：用逗號(hào)隔開基本選擇器，表示這些選擇器都獲取到

(二)層次/關(guān)系選擇器

（主要應(yīng)用在選擇父元素下的子元素，或者子元素下面的子元素，可與標(biāo)簽元素結(jié)合使用，減少命名，同時(shí)也可以通過(guò)層級(jí)，防止命名沖突。）

1.包含選擇器：用空格隔開基本選擇器，表示后一個(gè)選擇器是前面的后代

例：p a { color:red; }

2.子代選擇器：用隔開基本選擇器，表示后一個(gè)選擇器是前面的子代

例：ulli { line-style: none; }

3.相鄰兄弟選擇器：E+F:表示獲取到E后面的緊跟著的F元素（同級(jí)的）

例： a+a { }

4.兄弟選擇器：E~F:表示獲取到E后面所有的同級(jí)的F元素

例： li~li { }

(三）動(dòng)態(tài)偽類選擇器

1. a:link 錨鏈接被訪問(wèn)前添加樣式

2. a:visited 錨鏈接被訪問(wèn)后添加樣式

3. e:hover 鼠標(biāo)懸停在元素上添加樣式

4. e:active 鼠標(biāo)點(diǎn)擊元素時(shí)添加樣式

5. :focus 表單元素被聚焦時(shí)，添加樣式

(四)目標(biāo)偽類選擇器

語(yǔ)法： 目標(biāo):target {屬性：屬性值} 被選中的目標(biāo)添加樣式

目標(biāo):target E子元素{屬性：屬性值} 被選中的目標(biāo)里的E子元素添加樣式

(五)ui狀態(tài)偽類選擇器

1. :enabled 可用的表單元素添加樣式

2. :disabled 不可用的表單元素添加樣式(disabled )

3. :checked+E 被選中的表單元素添加樣式

(六)結(jié)構(gòu)偽類選擇器

1. E:first-child 獲取到E元素，且要滿足為其父元素的第一個(gè)孩子。

2. E:last-child 獲取到E元素，且要滿足為其父元素的最后一個(gè)孩子

3. E:nth-child(n) 獲取到E元素，且要滿足為其父元素的第n個(gè)孩子

n的用法：

(1)6n倍數(shù) (2)even偶數(shù)/2n odd奇數(shù)/2n-1（如可用來(lái)選中奇偶行來(lái)實(shí)現(xiàn) “隔行換色”）

(3) -n+5 選中1-5

(4)p:nth-child(-n+3):nth-child(n+2) 2-3個(gè)

4. E:nth-last-child(n) 獲取到E元素，且要滿足為其父元素的倒數(shù)第n個(gè)孩子

5. E:first-of-type 獲取到E元素，且要滿足為其父元素的第一個(gè)該類型的孩子

6. E:last-of-type 獲取到E元素，且要滿足為其父元素的最后一個(gè)該類型的孩子

7. E:nth-of-type(n) 獲取到E元素，且要滿足為其父元素的第n個(gè)該類型的孩子

8. E:nth-last-of-type(n)獲取到E元素，且要滿足為其父元素的倒數(shù)第n個(gè)該類型的孩子

9. E:empty 獲取到空的E元素（注：連空格都不能有）

(七)屬性選擇器

1. E[attr] 擁0有attr屬性的E元素添加樣式 如div[class];

2. E[attr="val"] 擁有attr屬性值 為 val的E元素添加樣式 如p[class="ab"]

3. E[attr*="val"] attr屬性值 包含 val的E元素添加樣式

如ul[class="c"] 指class類名中包含有c字母的E元素

4. E[attr^="val"] attr屬性值以val 開頭 的E元素添加樣式

5. E[attr$="val"] attr屬性值以val 結(jié)尾 的E元素添加樣式

(八)偽元素

1. E::before給E元素添加第一個(gè)子元素 （前面）

2. E::after 給E元素添加最后一個(gè)子元素（后面）

3. E::first-letter給E元素第一個(gè)字添加樣式

4. E::first-line給E元素第一行添加樣式

5. E::selection 元素內(nèi)容被選中時(shí)添加樣式(火狐需要加前綴-moz-)

css選擇器、css的書寫規(guī)范

類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。

而與類選擇器不同,id選擇器在HTML文檔僅僅使用一次,控制單個(gè)元素的樣式。

.class1.class2 id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素

element#id id和class選擇器和選擇器連寫的時(shí)候中間沒有分隔符，. 和 # 本身充當(dāng)分隔符的元素

*屬性選擇器

*偽類選擇器

*偽元素選擇器

優(yōu)先級(jí):從高到低

在支持 CSS 的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問(wèn)狀態(tài)，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸停狀態(tài)。

a;link 表示未被訪問(wèn)狀態(tài);

a:hover 表示鼠標(biāo)懸停狀態(tài);

a:active 表示活動(dòng)狀態(tài);

a;visited 表示已被訪問(wèn)狀態(tài);

他們的順序應(yīng)該是"LVHA"的順序.

E:first-child 匹配元素E的第一個(gè)子元素

E:link 匹配所有未被點(diǎn)擊的鏈接

E:visited 匹配所有已被點(diǎn)擊的鏈接

E:active 匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素

E:hover 匹配鼠標(biāo)懸停其上的E元素

E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素

E:lang(c) 匹配lang屬性等于c的E元素

E:enabled 匹配表單中可用的元素

E:disabled 匹配表單中禁用的元素

E:checked 匹配表單中被選中的radio或checkbox元素

E::selection 匹配用戶當(dāng)前選中的元素

E:root 匹配文檔的根元素，對(duì)于HTML文檔，就是HTML元素

E:nth-child(n) 匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1

E:nth-last-child(n) 匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號(hào)為1

E:nth-of-type(n) 與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素

E:nth-last-of-type(n) 與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素

E:last-child 匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)

E:first-of-type 匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)

E:only-child 匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

E:only-of-type 匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

E:empty 匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素

E:not(selector) 匹配不符合當(dāng)前選擇器的任何元素

參考

2、css 選擇器

使用 * 可為所有元素設(shè)置樣式。

根據(jù)標(biāo)簽為元素設(shè)置樣式

同時(shí)設(shè)置多個(gè)元素組合

類選擇器是為一類狀態(tài)聲明樣式規(guī)則，下面是把文本居中定義為類樣式。

將類選擇器指定為具體標(biāo)簽。這樣樣式的權(quán)重就提高了

注意span.help-block不能寫成 span .help-block。標(biāo)簽選擇器和類選擇器中間加了空格的話，就變成了 span下面所有class是help-block的選擇器了

HTML中元素是以父子級(jí)、兄弟關(guān)系存在的。后代選擇器指元素內(nèi)的元素（不只是子元素，是后代元素，子集，孫子級(jí)，所有的。。。）。

子元素選擇器中選擇子元素，不包括孫級(jí)及以下元素。

用于選擇緊挨著的同級(jí)兄弟元素。

用于選擇后面的所有指定的兄弟元素或者所有元素。

為具有 class 屬性的h1標(biāo)簽設(shè)置樣式

約束多個(gè)屬性

具體屬性值設(shè)置樣式

^ 以指定值開頭的元素

$ 以指定值結(jié)尾的元素

屬性內(nèi)部任何位置出現(xiàn)值的元素，包含關(guān)系

~ 屬性值中包含指定詞匯的元素

| 以指定值開頭或以屬性連接破折號(hào)的元素

CSS選擇器與優(yōu)先級(jí)詳解（一）

CSS選擇器又被稱為CSS樣式、CSS屬性選擇器。是由css命名及后面屬性及屬性值構(gòu)成一個(gè)整體。

1.基礎(chǔ)選擇器

a.id選擇器：通過(guò)設(shè)置元素的id屬性為該元素制定ID。ID由開發(fā)者指定。每個(gè)ID在文檔中必須是唯一的。在寫樣式表時(shí)，ID選擇器是以#開頭的。

HTML

CSS

執(zhí)行效果：

b.class選擇器：是以獨(dú)立于文檔元素的方式來(lái)指定樣式，使用類選擇器之前需要在html元素上定義類名，也就是要保證類名在html標(biāo)記中存在。

HTML

CSS

執(zhí)行效果：

c.元素選擇器：通過(guò)note節(jié)點(diǎn)名稱匹配元素。

HTML

CSS

2.屬性選擇器：

注意：最后一個(gè)選擇器是E[attr|=val]，由于輸入|會(huì)對(duì)表格造成影響，只能用/代替。

CSS3新增了一些屬性選擇器，待持續(xù)更新。

3.組合選擇器

示例如下：

實(shí)現(xiàn)效果如下：

示例如下：

從高到低依次是：

1.在屬性后面使用 !important會(huì)覆蓋頁(yè)面內(nèi)任何位置定義的元素樣式

2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式

3.id選擇器

4.類選擇器

5.偽類選擇器

6.屬性選擇器

7.標(biāo)簽選擇器

8.通配符選擇器

9.瀏覽器自定義

選擇器的特殊性值表述為4個(gè)部分，用0,0,0,0表示。

參考：

1. css優(yōu)先級(jí)計(jì)算規(guī)則

2. CSS選擇器筆記

3. Selectors MDN

4. CSS3 選擇器——基本選擇器

5. CSS3 選擇器——偽類選擇器

6. 征服高級(jí)CSS選擇器

文章名稱：樣式選擇器css,樣式選擇器的優(yōu)先級(jí)順序
當(dāng)前鏈接：http://vcdvsql.cn/article38/dsdespp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站制作、App開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)