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

CSS選擇器就是指定CSS要作用的標簽，那個標簽的名稱就是選擇器。意為：選擇哪個容器。

創新互聯建站網站建設公司是一家服務多年做網站建設策劃設計制作的公司,為廣大用戶提供了成都做網站、成都網站制作，成都網站設計，廣告投放平臺，成都做網站選創新互聯建站，貼合企業需求，高性價比，滿足客戶不同層次的需求一站式服務歡迎致電。

CSS選擇器分類：

標簽選擇器、類選擇器、ID選擇器、全局選擇器、群組選擇器、后代選擇器、偽類選擇器

1、html標簽選擇器：

定義：以html標簽作為選擇器

2、class類選擇器：

定義：為HTML標簽添加class屬性，通過類選擇器來為具有此class屬性的元素設置css樣式。

類選擇器也可以對不同類型元素的同一個名稱的類選擇器設置不同的樣式規則：

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

3、ID選擇器

定義：為HTML標簽添加ID屬性，通過ID選擇器來為具有此ID的元素設置CSS規則

4、群組選擇器

定義：集體統一設置樣式

5、全局選擇器

定義：所有標簽設置樣式

HTML文檔結構圖

6、后代選擇器

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

7、偽類選擇器

鏈接的四種狀態：激活狀態，已訪問狀態，未訪問狀態，鼠標懸停狀態。

偽類

說明

:link

未訪問的鏈接

:visited

已訪問的鏈接

:hover

鼠標懸停狀態

:active

激活的鏈接

:hover 用于訪問的鼠標經過某個元素時；

:active 用于一個元素被激活時（即按下鼠標之后放開鼠標之前的狀態）

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

說明：

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

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

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

8、CSS其它選擇器

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

選擇器的優先級

ID選擇優先級最高（id選擇器定義具有唯一性）

class選擇器次之（class選擇器可以多個）

元素選擇器再次之

其它選擇器優先級主要根據定義的先后順序，最后定義的優先級高

!important 加重選擇器的優先級，添加在樣式規則之后，中間用空格隔開。

CSS選擇器命名規則

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

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

3：使用有意義的命名規范

常用CSS命名

header

頁頭

main

主體

footer

頁尾

nav

導航

sidebar

側欄

container

容器

column

欄目

title

標簽

menu

菜單

submenu

子菜單

*列舉常用命名，大家根據自身項目及團隊的規則命名

耐心學習基礎知識，基礎是蓋房的根基，必須打結實。

如果您覺得有用，記得在下方點贊、關注、留言，我會定期奉 上更多的驚喜哦，您的打賞支持才是我繼續努力的動力，么么噠。

每日分享在學習過程中總結的學習經驗，學習筆記，筆試題，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以學習為目的，每天閱讀一篇文章，了解身邊的技術。陪有夢想的人一起成長！

css的選擇器有哪些?優先級?

1、標記選擇器（如：body,div,p,ul,li）

2、id選擇器（如：id="name",id="name_txt"）

3、類選擇器（如：id="name",id="name_txt"）

4、后代選擇器（如：#head.navulli從父集到子孫集的選擇器）

5、子元素選擇器（如：divp,帶大于號）

6、偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）

看完了基本的css選擇器類型后，我們接著來看一下css優先級的概念。

當兩個規則都作用到了同一個html元素上時，如果定義的屬性有沖突，那么應該用誰的值的，用到誰的值誰的優先級就高。

我們來看一下css選擇器優先級的算法：

每個規則對應一個初始"四位數"：0、0、0、0

若是行內選擇符，則加1、0、0、0

若是ID選擇符，則加0、1、0、0

若是類選擇符/偽類選擇符，則分別加0、0、1、0

若是元素選擇符，則分別加0、0、0、1

算法：將每條規則中，選擇符對應的數相加后得到的”四位數“，從左到右進行比較，大的優先級越高。

看完了上述內容，那我們就來看看css選擇器優先級的具體排序。

css選擇器優先級最高到最低順序為：

1.id選擇器（#myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div,h1,p）

4.子選擇器（ulli）

5.后代選擇器（lia）

6.偽類選擇（a:hover,li:nth-child）

最后，需要注意的是：

!important的優先級是最高的，但出現沖突時則需比較”四位數“;

優先級相同時，則采用就近原則，選擇最后出現的樣式;

繼承得來的屬性，其優先級最低。

css有哪些選擇器

CSS中常用的選擇器：

（一）基本選擇器（二）層次選擇器（三）動態偽類選擇器（四）目標偽類選擇器

（五）ui狀態偽類選擇器（六）結構偽類選擇器（七）屬性選擇器（八）偽元素

(一)基本選擇器

1.標簽選擇器：通過標簽名獲取元素 權重：0001

（此種選擇器影響范圍大，建議盡量應用在層級選擇器中。）

2.class選擇器：通過 . 類名獲取元素 權重：0010

（通過class類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。）

3.id選擇器：通過 # id名獲取元素 權重：0100

（通過id名來選擇元素，元素的id名稱不能重復，所以一個樣式設置項只能對應于頁面上一個元素，不能復用，id名一般給程序使用，所以不推薦使用id作為選擇器。 ）

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

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

(二)層次/關系選擇器

（主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標簽元素結合使用，減少命名，同時也可以通過層級，防止命名沖突。）

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

例：p a { color:red; }

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

例：ulli { line-style: none; }

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

例： a+a { }

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

例： li~li { }

(三）動態偽類選擇器

1. a:link 錨鏈接被訪問前添加樣式

2. a:visited 錨鏈接被訪問后添加樣式

3. e:hover 鼠標懸停在元素上添加樣式

4. e:active 鼠標點擊元素時添加樣式

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

(四)目標偽類選擇器

語法： 目標:target {屬性：屬性值} 被選中的目標添加樣式

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

(五)ui狀態偽類選擇器

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

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

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

(六)結構偽類選擇器

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

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

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

n的用法：

(1)6n倍數 (2)even偶數/2n odd奇數/2n-1（如可用來選中奇偶行來實現 “隔行換色”）

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

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

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

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

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

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

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

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 結尾 的E元素添加樣式

(八)偽元素

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

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

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

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

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

css樣式有哪幾種選擇器？

CSS選擇器、優先級與匹配原理\x0d\x0a1.id 選擇器（#myid）2.類選擇器（.myclassname）3.標簽選擇器（div,h1,p）4.相鄰選擇器（h1+p）5.子選擇器（ul 通配選擇符的權值 0,0,0,0\x0d\x0a2.標簽的權值為 0,0,0,1\x0d\x0a3.類的權值為 0,0,1,0\x0d\x0a4.屬性選擇的權值為 0,0,1,0\x0d\x0a5.偽類選擇的權值為 0,0,1,0\x0d\x0a6.偽對象選擇的權值為 0,0,0,1\x0d\x0a7.ID的權值為 0,1,0,0\x0d\x0a8.important的權值為最高 1,0,0,0\x0d\x0a使用規則： 選擇器的權值加到一起，大的優先；如果權值相同，后定義的優先 。\x0d\x0a從上面我們可以得出兩個關鍵的因素：\x0d\x0a1.權值的大小跟選擇器的類型和數量有關\x0d\x0a2.樣式的優先級跟樣式的定義順序有關

當前名稱：哪些是css的樣式選擇器,哪些是css的樣式選擇器
當前URL：http://vcdvsql.cn/article30/dsdshpo.html

成都網站建設公司_創新互聯，為您提供云服務器、建站公司、網頁設計公司、電子商務、移動網站建設、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯