css選擇器

CSS（Cascading Style Sheet），中文譯為層疊樣式表，可以讓設(shè)計(jì)者方便靈活地控制Web頁面的外觀表現(xiàn)。CSS是1996年由W3C審核通過并且推薦使用的。CSS的引入，就是為了使HTML語言更好地適應(yīng)網(wǎng)頁的美工設(shè)計(jì)。CSS詳細(xì)規(guī)范說明要查閱CSS手冊，或登錄W3C官網(wǎng)（ ）。

創(chuàng)新互聯(lián)是專業(yè)的平壩網(wǎng)站建設(shè)公司，平壩接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行平壩網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

使用CSS，要了解常用的各種選擇器。

1.標(biāo)記選擇器：

一個(gè)HTML頁面由很多不同的標(biāo)記組成，而CSS選擇器就是聲明哪些標(biāo)記采用哪種CSS樣式。每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。示例：

每一個(gè)選擇器都包含選擇器本身、屬性和值，其中屬性和值可以設(shè)置多個(gè)，從而實(shí)現(xiàn)對同一標(biāo)記名稱聲明多種樣式。CSS語言對于所有屬性和值都有相對嚴(yán)格的要求，如果聲明的屬性在CSS規(guī)范中沒有，或者某個(gè)屬性的值不符合該屬性的要求，都不能使該CSS語句生效。 還有一種通配選擇器“*”，表示其中設(shè)置的樣式會應(yīng)用于所有的網(wǎng)頁元素。示例：

htmlheadtitleclass選擇器/title

style type="text/css"

.red{ color: red; font-size:18px; }

.green{ color: green; font-size:20px; }

/style/head

body

p class="red"class選擇器1/p

p class="green"class選擇器2/p

h3 class="green"h3使用class/h3

/body

/html

htmlheadtitleID選擇器/title

style type="text/css"

#bold{ font-weight: bold; }

#green{ font-size:30px; color:#009900; }

/style/head

body

p id="bold"ID選擇器1/p

p id="green"ID選擇器2/p

/body/html

htmlheadtitle交集選擇器/title

style type="text/css"

p{ / 標(biāo)記選擇器 / color: blue; }

p.special{ / 標(biāo)記.類別選擇器 / color: red; }

.special{ / 類別選擇器 / color: green; }

/style/head

body

p 普通段落文本（藍(lán)色）……/p

h3 普通標(biāo)題文本（黑色）……/h3

p class="special"指定了.special類別的段落文本（紅色）……/p

h3 class="special"指定了.special類別的標(biāo)題文本（綠色）……/h3

/body

/html

htmlheadtitle并集選擇器/title

style type="text/css"

h1,h2,h3.h4.h5.p{ / 并集選擇器 / color: purple; font-size:15px; }

h2.special,.special,#one{ / 集體聲明 / text-decoration:underline; }

/style/head

body

h1 示例文字h1……/h1

h2 class=”special” 示例文字h2……/h2

h3 示例文字h3……/h3

p 示例文字p1……/p

p class="special"示例文字p2……/p

p id="one"示例文字p3……/p

/body/html

htmlheadtitle后代選擇器/title

style type=”text/css”

p span{ / 嵌套聲明 / color: red; }

span{ color:blue; }

/style/head

body

p 嵌套使span用CSS（紅色）/span標(biāo)記的方法/p

嵌套之外的span標(biāo)記（黑色）/span不生效

/body/html

:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child

:nth-last-of-type

css有哪些選擇器

CSS中常用的選擇器：

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

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

(一)基本選擇器

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

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

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

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

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

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

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

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

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

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

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

例：p a { color:red; }

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

例：ulli { line-style: none; }

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

例： a+a { }

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

例： li~li { }

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

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

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

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

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

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

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

語法： 目標(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（如可用來選中奇偶行來實(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-)

css3的選擇器有哪些？

css3選擇器如下：

一、通配符選擇器（*）

通配符選擇器是用來選擇所有元素，，也可以選擇某個(gè)元素下的所有元素。

二、元素選擇器（E）

元素選擇器，是css選擇器中最常見而且最基本的選擇器。

三、類選擇器（.className）

類選擇器是以一獨(dú)立于文檔元素的方式來指定樣式，使用類選擇器之前需要在html元素上定義類名

四、id選擇器（#ID）

ID選擇器和上面說的類選擇器是很相似的，在使用ID選擇器之前也需要先在html文檔中加注ID名稱，這樣在樣式選擇器中才能找到相對應(yīng)的元素，不同的是ID選擇器是一個(gè)頁面中唯一的值，我們在類使用時(shí)是在相對應(yīng)的類名前加上一個(gè)“.”號（.className）而id選擇器是在名稱前使用＂#＂如（#id）,

五、后代選擇器（E F）

后代選擇器也被稱作包含選擇器，所起作用就是可以選擇某元素的后代元素，比如說：E?

F，前面E為祖先元素，F(xiàn)為后代元素，所表達(dá)的意思就是選擇了E元素的所有后代F元素，請注意他們之間需要一個(gè)空格隔開。

六、子元素選擇器（Egt;F）

子元素選擇器只能選擇某元素的子元素，其中E為父元素，而F為子元素，其中Egt;F所表示的是選擇了E元素下的所有子元素F。這和后代選擇器（E?

F）不一樣，在后代選擇器中F是E的后代元素，而子元素選擇器E gt; F，其中F僅僅是E的子元素而以。

七、相鄰兄弟元素選擇器（E + F）

相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個(gè)相同的父元素，換句話說，EF兩元素具有一個(gè)相同的父元素，而且F元素在E元素后面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇F元素。

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中元素是以父子級、兄弟關(guān)系存在的。后代選擇器指元素內(nèi)的元素（不只是子元素，是后代元素，子集，孫子級，所有的。。。）。

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

用于選擇緊挨著的同級兄弟元素。

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

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

約束多個(gè)屬性

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

^ 以指定值開頭的元素

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

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

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

| 以指定值開頭或以屬性連接破折號的元素

css樣式有哪幾種選擇器？

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

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

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

CSS選擇器分類：

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

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

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

2、class類選擇器：

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

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

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

3、ID選擇器

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

4、群組選擇器

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

5、全局選擇器

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

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

6、后代選擇器

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

7、偽類選擇器

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

偽類

說明

:link

未訪問的鏈接

:visited

已訪問的鏈接

:hover

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

:active

激活的鏈接

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

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

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

說明：

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

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

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

8、CSS其它選擇器

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

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

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

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

元素選擇器再次之

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

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

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

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

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

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

常用CSS命名

header

頁頭

main

主體

footer

頁尾

nav

導(dǎo)航

sidebar

側(cè)欄

container

容器

column

欄目

title

標(biāo)簽

menu

菜單

submenu

子菜單

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

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

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

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

本文標(biāo)題：css樣式選擇器,css樣式選擇器的類型有哪幾種
當(dāng)前鏈接：http://chinadenli.net/article32/dsijssc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、靜態(tài)網(wǎng)站、網(wǎng)站策劃、面包屑導(dǎo)航、Google、網(wǎng)站制作

廣告

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