詳解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的選擇器，包括哪幾種類型？

在

CSS

中，選擇器是一種模式，用于選擇需要添加樣式的元素。

"CSS"

列指示該屬性是在哪個

CSS

版本中定義的。（CSS1、CSS2

還是

CSS3。）

選擇器

例子

例子描述

CSS

.class

.intro

選擇

class="intro"

的所有元素。

1

#id

#firstname

選擇

id="firstname"

的所有元素。

1

*

*

選擇所有元素。

2

element

p

選擇所有

p

元素。

1

element,element

div,p

選擇所有

div

元素和所有

p

元素。

1

element element

div

p

選擇

div

元素內部的所有

p

元素。

1

elementelement

divp

選擇父元素為

div

元素的所有

p

元素。

2

element+element

div+p

選擇緊接在

div

元素之后的所有

p

元素。

2

[attribute]

[target]

選擇帶有

target

屬性所有元素。

2

[attribute=value]

[target=_blank]

選擇

target="_blank"

的所有元素。

2

[attribute~=value]

[title~=flower]

選擇

title

屬性包含單詞

"flower"

的所有元素。

2

[attribute|=value]

[lang|=en]

選擇

lang

屬性值以

"en"

開頭的所有元素。

2

:link

a:link

選擇所有未被訪問的鏈接。

1

:visited

a:visited

選擇所有已被訪問的鏈接。

1

:active

a:active

選擇活動鏈接。

1

:hover

a:hover

選擇鼠標指針位于其上的鏈接。

1

:focus

input:focus

選擇獲得焦點的

input

元素。

2

:first-letter

p:first-letter

選擇每個

p

元素的首字母。

1

:first-line

p:first-line

選擇每個

p

元素的首行。

1

:first-child

p:first-child

選擇屬于父元素的第一個子元素的每個

p

元素。

2

:before

p:before

在每個

p

元素的內容之前插入內容。

2

:after

p:after

在每個

p

元素的內容之后插入內容。

2

:lang(language)

p:lang(it)

選擇帶有以

"it"

開頭的

lang

屬性值的每個

p

元素。

2

element1~element2

p~ul

選擇前面有

p

元素的每個

ul

元素。

3

[attribute^=value]

a[src^="https"]

選擇其

src

屬性值以

"https"

開頭的每個

a

元素。

3

[attribute$=value]

a[src$=".pdf"]

選擇其

src

屬性以

".pdf"

結尾的所有

a

元素。

3

[attribute*=value]

a[src*="abc"]

選擇其

src

屬性中包含

"abc"

子串的每個

a

元素。

3

:first-of-type

p:first-of-type

選擇屬于其父元素的首個

p

元素的每個

p

元素。

3

:last-of-type

p:last-of-type

選擇屬于其父元素的最后

p

元素的每個

p

元素。

3

:only-of-type

p:only-of-type

選擇屬于其父元素唯一的

p

元素的每個

p

元素。

3

:only-child

p:only-child

選擇屬于其父元素的唯一子元素的每個

p

元素。

3

:nth-child(n)

p:nth-child(2)

選擇屬于其父元素的第二個子元素的每個

p

元素。

3

:nth-last-child(n)

p:nth-last-child(2)

同上，從最后一個子元素開始計數。

3

:nth-of-type(n)

p:nth-of-type(2)

選擇屬于其父元素第二個

p

元素的每個

p

元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是從最后一個子元素開始計數。

3

:last-child

p:last-child

選擇屬于其父元素最后一個子元素每個

p

元素。

3

:root

:root

選擇文檔的根元素。

3

:empty

p:empty

選擇沒有子元素的每個

p

元素（包括文本節點）。

3

:target

#news:target

選擇當前活動的

#news

元素。

3

:enabled

input:enabled

選擇每個啟用的

input

元素。

3

:disabled

input:disabled

選擇每個禁用的

input

元素

3

:checked

input:checked

選擇每個被選中的

input

元素。

3

:not(selector)

:not(p)

選擇非

p

元素的每個元素。

3

::selection

::selection

選擇被用戶選取的元素部分。

什么是css選擇器

css選擇器是指可以獲取元素（標簽）對象，可以用來定義樣式或設置樣式

css的選擇器有哪些

CSS選擇器如下：

1. 標簽名選擇器 div { color：Red;} /即頁面中的各個標簽名的css樣式

2.類選擇器 .divClass {color:Red;} /即定義的每個標簽的class 中的css樣式

3.ID選擇器 #myDiv {color:Red;} /即頁面中的標簽的id

4.后代選擇器（類選擇器的后代選擇器） .divClass span { color:Red;} /即多個選擇器以逗號的格式分隔 命名找到準確的標簽

5.群組選擇器 div,span,img {color:Red} /即具有相同樣式的標簽分組顯示

選擇器的優先級

1.最高優先級是 (直接在標簽中的設置樣式，假設級別為1000)div style="color:Red;"/div

2.次優先級是（ID選擇器 ,假設級別為100） #myDiv{color:Red;}

3.其次優先級是（類選擇器，假設級別為10） .divClass{color:Red;}

4.最后優先級是 （標簽選擇器，假設級別是 1） div{color:Red;}

5.那么后代選擇器的優先級就可以計算了啊

比如 .divClass span { color:Red;} 優先級別就是：10+1=11

想詳細的話可以參考W3C文檔。

css樣式中選擇器是什么意思

選擇器其實不難理解，就好比人名。打個簡單的比方，路人甲的名字叫馬花藤，外號小馬哥。相對于css，“馬花藤”，“路人甲”，“小馬哥”

都可以成為這個人的選擇器了。所以簡單來看，選擇器就是

html

標簽的某個特有屬性，如

id

class

tagname等，

div

id="id-div"

class="class-div"。。。。。

分別使用

#id-div

\

.class-div

或者

直接

div，然后編輯對應樣式，就可以實現對其樣式的控制了......

另外給你推薦個工具，

firefox瀏覽器下使用插件

firebug

學起來會比較快

:-)