css的選擇器有哪些

CSS選擇器如下：

十余年的望江網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整望江建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“望江網(wǎng)站設(shè)計(jì)”,“望江網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

1. 標(biāo)簽名選擇器 div { color：Red;} /即頁(yè)面中的各個(gè)標(biāo)簽名的css樣式

2.類(lèi)選擇器 .divClass {color:Red;} /即定義的每個(gè)標(biāo)簽的class 中的css樣式

3.ID選擇器 #myDiv {color:Red;} /即頁(yè)面中的標(biāo)簽的id

4.后代選擇器（類(lèi)選擇器的后代選擇器） .divClass span { color:Red;} /即多個(gè)選擇器以逗號(hào)的格式分隔 命名找到準(zhǔn)確的標(biāo)簽

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

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

1.最高優(yōu)先級(jí)是 (直接在標(biāo)簽中的設(shè)置樣式，假設(shè)級(jí)別為1000)div style="color:Red;"/div

2.次優(yōu)先級(jí)是（ID選擇器 ,假設(shè)級(jí)別為100） #myDiv{color:Red;}

3.其次優(yōu)先級(jí)是（類(lèi)選擇器，假設(shè)級(jí)別為10） .divClass{color:Red;}

4.最后優(yōu)先級(jí)是 （標(biāo)簽選擇器，假設(shè)級(jí)別是 1） div{color:Red;}

5.那么后代選擇器的優(yōu)先級(jí)就可以計(jì)算了啊

比如 .divClass span { color:Red;} 優(yōu)先級(jí)別就是：10+1=11

想詳細(xì)的話可以參考W3C文檔。

詳細(xì)說(shuō)明css的常用選擇器類(lèi)型有哪些

css常用的四種選擇器類(lèi)型有：

標(biāo)簽選擇器：針對(duì)一類(lèi)標(biāo)簽

ID選擇器：針對(duì)某一個(gè)特定的標(biāo)簽使用

類(lèi)選擇器：針對(duì)你想要的所有標(biāo)簽使用

后代選擇器：用空格隔開(kāi)

1、標(biāo)簽選擇器：選擇器的名字代表html頁(yè)面上的標(biāo)簽

標(biāo)簽選擇器，選擇的是頁(yè)面上所有這種類(lèi)型的標(biāo)簽，所以經(jīng)常描述“共性”，無(wú)法描述某一個(gè)元素的“個(gè)性”。

舉例：

style type="text/css"

p{

font-size:14px;

}

/style

body

pcss/p

/body

再比如說(shuō)，想讓“學(xué)完了安卓，繼續(xù)學(xué)前端喲”這句話中的“前端”兩個(gè)變?yōu)榧t色字體，那么可以用span標(biāo)簽把“前端”這兩個(gè)字圍起來(lái)，然后給span標(biāo)簽加一個(gè)標(biāo)簽選擇器。

代碼如下：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

style type="text/css"

span{

color: red;

}

/style

/head

body

p學(xué)完了安卓，繼續(xù)學(xué)span前端/span喲/p

/body

/html

【總結(jié)】需要注意的是：

（1）所有的標(biāo)簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。

（2）無(wú)論這個(gè)標(biāo)簽藏的多深，一定能夠被選擇上。

（3）選擇的所有，而不是一個(gè)。

2、ID選擇器：規(guī)定用#來(lái)定義（名字自定義）

針對(duì)某一個(gè)特定的標(biāo)簽來(lái)使用，只能使用一次。css中的ID選擇器以”#”來(lái)定義。

舉例：

head

titleDocument/title

style type="text/css"

#mytitle

{

border:3px dashed green;

}

/style

/head

然后在別處使用id來(lái)引用它：

body

h2 id="mytitle"你好/h2

/body

id選擇器的選擇符是“#”。

任何的HTML標(biāo)簽都可以有id屬性。表示這個(gè)標(biāo)簽的名字。這個(gè)標(biāo)簽的名字，可以任取，但是：

（1）只能有字母、數(shù)字、下劃線。

（2）必須以字母開(kāi)頭。

（3）不能和標(biāo)簽同名。比如id不能叫做body、img、a。

（4）大小寫(xiě)嚴(yán)格區(qū)分，也就是說(shuō)aa,和AA是兩個(gè)不同的ID

另外，特別強(qiáng)調(diào)的是：HTML頁(yè)面，不能出現(xiàn)相同的id，哪怕他們不是一個(gè)類(lèi)型。比如頁(yè)面上有一個(gè)id為pp的p，一個(gè)id為pp的div，是非法的！

一個(gè)標(biāo)簽可以被多個(gè)css選擇器選擇：

比如，可以同時(shí)讓標(biāo)簽選擇器和id選擇器作用于同一個(gè)標(biāo)簽。（用到了層疊）如下：

請(qǐng)點(diǎn)擊輸入圖片描述

然后通過(guò)網(wǎng)頁(yè)的審查元素看一下效果：

請(qǐng)點(diǎn)擊輸入圖片描述

現(xiàn)在，假設(shè)選擇器沖突了，比如id選擇器說(shuō)這個(gè)文字是紅色的，標(biāo)簽選擇器說(shuō)這個(gè)文字是綠色的。那么聽(tīng)誰(shuí)的？

實(shí)際上，css有著非常嚴(yán)格的計(jì)算公式，能夠處理沖突.

一個(gè)標(biāo)簽可以被多個(gè)css選擇器選擇，共同作用，這就是“層疊式”的第一層含義

3、類(lèi)選擇器：規(guī)定用圓點(diǎn).來(lái)定義

類(lèi)選擇器.?針對(duì)想要的所有標(biāo)簽使用。優(yōu)點(diǎn)：靈活。

css中用.來(lái)表示類(lèi)。舉例如下：

style type="text/css"

.oneclass/*定義類(lèi)選擇器*/{

width:800px;

}

/style

/head

然后在別處使用class來(lái)引用它：

body

h2 class="oneclass"你好/h2

/body

和id非常相似，任何的標(biāo)簽都可以攜帶id屬性和class屬性。但是id屬性只能被某一特定標(biāo)簽引用一次

class屬性的特點(diǎn)：

特性1：類(lèi)選擇器可以被多種標(biāo)簽使用。

特性2：同一個(gè)標(biāo)簽可以使用多個(gè)類(lèi)選擇器。用空格隔開(kāi)。舉例如下

h3 class="classone ?classtwo"我是一個(gè)h3啊/h3

而不能寫(xiě)成：

h3 class="teshu" class="zhongyao"我是一個(gè)h3啊/h3

類(lèi)選擇器使用的舉例：

類(lèi)選擇器的使用，能夠決定一個(gè)人的css水平。

應(yīng)該注意：

（1）不要去試圖用一個(gè)類(lèi)名，把某個(gè)標(biāo)簽的所有樣式寫(xiě)完。這個(gè)標(biāo)簽要多攜帶幾個(gè)類(lèi)，共同完成這個(gè)標(biāo)簽的樣式。

（2）每一個(gè)類(lèi)要盡可能小，有“公共”的概念，能夠讓更多的標(biāo)簽使用。

如：

style type="text/css"

.lv{

color: green;

}

.da{

font-size: 30px;

}

.underline{

text-decoration: underline;

}

/style

然后讓每個(gè)標(biāo)簽去選取自己想要用的類(lèi)選擇器：

p class="lv da"段落1/p

p class="lv xian"段落2/p

p class="da xian"段落3/p

問(wèn)題：到底用id還是用class？

答案：盡可能的用class，除非極特殊的情況可以用id。

原因：id是js用的。也就是說(shuō)，js要通過(guò)id屬性得到標(biāo)簽，所以css層面盡量不用id，要不然js就很別扭。另一層面，會(huì)認(rèn)為一個(gè)有id的元素，有動(dòng)態(tài)效果。

舉例如下：

請(qǐng)點(diǎn)擊輸入圖片描述

上圖所示，css和js都在用同一個(gè)id，會(huì)出現(xiàn)不好溝通的情況。

記住這句話：類(lèi)上樣式，id上行為。意思是說(shuō)，class屬性交給css使用，id屬性交給js使用。

上面這三種選擇器的區(qū)別：

標(biāo)簽選擇器針對(duì)的是頁(yè)面上的一類(lèi)標(biāo)簽。

ID選擇器是只針對(duì)特定的標(biāo)簽(一個(gè))，ID是此標(biāo)簽在此頁(yè)面上的唯一標(biāo)識(shí)。

類(lèi)選擇器可以被多種標(biāo)簽使用。

4、后代選擇器: 定義的時(shí)候用空格隔開(kāi)

對(duì)于E F這種格式，表示所有屬于E元素后代的F元素，有這個(gè)樣式。空格就表示后代。

后代選擇器，就是一種平衡：共性、特性的平衡。當(dāng)要把某一個(gè)部分的所有的什么，進(jìn)行樣式改變，就要想到后代選擇器。

后代選擇器，描述的是祖先結(jié)構(gòu)。

看定義可能有點(diǎn)難理解，我們來(lái)看例子吧。

舉例1：

style type="text/css"

.div1 p{

color:red;

}

/style

空格就表示后代。.div1 p 表示.div1的后代所有的p。

這里強(qiáng)調(diào)一下：這兩個(gè)標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。也就是說(shuō)，選擇的是后代，不一定是兒子。

舉例：

style type="text/css"

h3 b i{

color:red ;

}

/style

上方代碼的意思是說(shuō)：定義了h3標(biāo)簽中的b標(biāo)簽中的i標(biāo)簽的樣式。

同理：h3和b和i標(biāo)簽不一定是連續(xù)緊挨著的，只要保持一個(gè)后代的關(guān)聯(lián)即可。

效果：

請(qǐng)點(diǎn)擊輸入圖片描述

或者還有下面這種寫(xiě)法：

請(qǐng)點(diǎn)擊輸入圖片描述

上面的這種寫(xiě)法，h3標(biāo)簽和i標(biāo)簽并不是緊挨著的，但他們保持著一種后代關(guān)系。

還有下面這種寫(xiě)法：（含類(lèi)選擇器、id選擇器都是可以的）

請(qǐng)點(diǎn)擊輸入圖片描述

在開(kāi)頭說(shuō)了：后代選擇器，描述的是一種祖先結(jié)構(gòu)。舉個(gè)例子來(lái)說(shuō)明這句話：

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

style type="text/css"

? ?div div p{

? ? ? ?color: red;

? ?}

? ?.div2{...}

? ?.div3{...}

? ?.div4{...}

/style

/head

body

div

? ?div

? ? ? ?div

? ? ? ? ? ?div

? ? ? ? ? ? ? ?p我是什么顏色？/p

? ? ? ? ? ?/div

? ? ? ?/div

? ?/div

/div

/body

/html

上面css中的div div p，也能使文字的顏色變紅。通過(guò)瀏覽器的審查元素，我們可以看到 p元素的祖先列表：

請(qǐng)點(diǎn)擊輸入圖片描述

2、css 選擇器

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

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

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

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

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

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

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

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

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

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

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

約束多個(gè)屬性

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

^ 以指定值開(kāi)頭的元素

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

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

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

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

請(qǐng)簡(jiǎn)要說(shuō)明css樣式表中三種選擇器(三種樣式)的特點(diǎn)

CSS選擇器的類(lèi)型分為3類(lèi):標(biāo)記選擇器、類(lèi)別選擇器和ID選擇器。（可能名稱(chēng)有不同的說(shuō)法，但意思都是一樣的）

標(biāo)記選擇器是利用HTML的標(biāo)記直接定義標(biāo)記內(nèi)容的樣式，如：h1{

color:red;

font-size:25pt;}

類(lèi)別選擇器是通常說(shuō)的class選擇器，定義的時(shí)候要在名稱(chēng)前加.如：.one{

color:red;

font-size:25pt;}

ID選擇器定義的時(shí)候要在前面加#，如：#box

{

color:red;

font-size:25pt;}

利用DW寫(xiě)CSS的時(shí)候，高級(jí)就是上面說(shuō)的ID選擇器，ID選擇器的名字可以任意命名，可以自己定義，可是標(biāo)簽就只能是HTML語(yǔ)言里制定的那些標(biāo)記，不能自己定義。

在“新建css樣式”對(duì)話框中可用的選擇器有哪四種？

最常用的四種選擇器是：元素選擇器、類(lèi)選擇器、ID選擇器、派生選擇器

1、元素選擇器

最常見(jiàn)的css選擇器當(dāng)屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代碼會(huì)對(duì)整個(gè)文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時(shí)添加灰色背景；對(duì)文檔中所有h2元素添加紅色背景。

通過(guò)上面的例子也可以看出css的基本規(guī)則結(jié)構(gòu)：由選擇器和聲明塊組成。每個(gè)聲明塊中包含一個(gè)或多個(gè)聲明。每個(gè)聲明的格式為：屬性名 ： 屬性值。如下圖所示：

每條聲明以分號(hào)”;”結(jié)尾。如果在一個(gè)聲明中使用了不正確的屬性值，或者不正確的屬性，則該條聲明會(huì)被忽略掉。另外請(qǐng)注意不要忘記每條聲明后面的分號(hào)。

我們也可以同時(shí)對(duì)多個(gè)html元素進(jìn)行聲明：

h1, h2, h3, h4, h5, h6, p {font-family: 黑體;}

這樣會(huì)將文檔中所有的h1~h6以及p元素字體設(shè)置為”黑體”。如果我們希望一鍋粥地選取所有的元素，可以使用通配符”*”： * { font-size: 20px;}

這樣所有的元素都將被選中，雖然font-size屬性對(duì)于某些元素是無(wú)效的，那么它將被忽略。

2、類(lèi)選擇器

(1)單類(lèi)選擇器

單純的元素選擇器似乎還過(guò)于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問(wèn)題在于我們不能確定稿件的截至日期將會(huì)出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個(gè)時(shí)候，我們可以考慮使用類(lèi)選擇器(class selector)。

要使用類(lèi)選擇器我們需要首先對(duì)文件元素添加一個(gè)class屬性，比如截至日期可能會(huì)出現(xiàn)在以下元素中:

p class="deadline".../p

h2 class="deadline".../h2

這樣我們就可以用以下方式使用類(lèi)選擇器了：

p.deadline { color: red;}

h2.deadline { color: red;}

點(diǎn)號(hào)”.”加上類(lèi)名就組成了一個(gè)類(lèi)選擇器。以上2個(gè)選擇器會(huì)選擇所有包含”deadline”類(lèi)的p元素和h2元素。而其余包含該屬性的元素則不會(huì)被選中。

如果我們省略.deadline前面的元素名，那么所有包含該類(lèi)的元素都將被選中：

.deadline { color: red;}

通常情況下，我們會(huì)組合使用以上2者得到更加有趣的樣式：

.deadline { color: red;}

span.deadline { font-style: italic;}

以上代碼首先會(huì)對(duì)所有的包含deadline的元素字體設(shè)置為紅色，同時(shí)會(huì)對(duì)span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在span/span中就可以了。

(2)多類(lèi)選擇器

在實(shí)踐的做法中，元素的calss屬性可能不止包含一個(gè)單詞，而是一串單詞，各個(gè)單詞之間用空格隔開(kāi)。

比如某些元素包含一個(gè)”warning”類(lèi)，某些元素包含一個(gè)”important”類(lèi)，某些元素同時(shí)包含”warning important”類(lèi)。屬性名出現(xiàn)的順序沒(méi)有關(guān)系：

class = "warning important"

class = "important warning"

以上2者是等價(jià)的。我們希望包含warning類(lèi)的元素有一個(gè)醒目的紅色字體，包含important屬性的元素有一個(gè)加粗的字體顯示，而同時(shí)包含以上2中屬性的元素另外擁有一個(gè)藍(lán)色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：

.warning { color: red;}

.important { font-weight: bold;}

.warning.important { background: blue;}

當(dāng)然，第三條你也可以寫(xiě)成： .important.warning { background: blue;} 和詞序沒(méi)有關(guān)系。說(shuō)明一下，.warning會(huì)匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會(huì)匹配所有同時(shí)包含以上2種屬性的元素，不管該元素還包含多少其他的類(lèi)，也不管他們?cè)陬?lèi)列表中出現(xiàn)的順序，只要其中含有這2個(gè)屬性，則會(huì)被選擇進(jìn)來(lái)！

同樣地，多于多類(lèi)選擇器，在前面加上元素名，則會(huì)匹配包含指定類(lèi)名的指定元素，例如：p.warning.important {}

將會(huì)匹配同時(shí)包含warning和important屬性的p元素，其他同樣包含以上2類(lèi)的元素則不會(huì)被選中。

3、ID選擇器

ID選擇器和類(lèi)選擇器有些類(lèi)似，但是差別又十分顯著。首先一個(gè)元素不能像類(lèi)屬性一樣擁有多個(gè)類(lèi)，一個(gè)元素只能擁有一個(gè)唯一的ID屬性。其次一個(gè)ID值在一個(gè)HTML文檔中只能出現(xiàn)一次，也就是一個(gè)ID只能唯一標(biāo)識(shí)一個(gè)元素(不是一類(lèi)元素，而是一個(gè)元素)。類(lèi)似類(lèi)屬性，在使用ID選擇器前首先要在元素中添加ID屬性，例如：

p id="top-para".../p

p id="foot-para".../p

使用ID選擇器的方法為井號(hào)”#”后面跟id值。現(xiàn)在我們使用id選擇器選擇以上2個(gè)p元素如：

#top-para {} #foot-para {}；

這樣我們就可以對(duì)以上2個(gè)段落進(jìn)行需要的操作了。正因?yàn)镮D選擇器的唯一性，也使其用法變得相對(duì)簡(jiǎn)單。

4、屬性選擇器

屬性選擇器在css2中引入，使我們可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。下面分別來(lái)說(shuō)明：

(1)簡(jiǎn)單屬性選擇器

簡(jiǎn)單的屬性選擇器可以使我們根據(jù)一個(gè)元素是否包含某個(gè)屬性來(lái)做出選擇。使用方法為: 元素名[屬性名] 或 *[屬性名]。比如我們希望選擇帶有alt屬性的所有img元素： img[alt] { ...}

選擇帶有title屬性的所有元素：*[title] { ...}。同類(lèi)選擇器類(lèi)似，我們也可以根據(jù)多個(gè)屬性信息進(jìn)行選擇，例如同時(shí)擁有href和title的a元素：

a[href][title] { ...}

組合使用類(lèi)選擇器使我們的選擇更加富于靈活性。

(2)具體屬性值選擇器

如果我們希望更加精確地根據(jù)屬性值來(lái)選擇元素，我們可以在簡(jiǎn)單的屬性選擇器中指定屬性的值。最簡(jiǎn)單的我們希望找到href屬性值為的錨元素：

a[href=""] { font-weight: bold;}

要特別注意的是，這里的具體值匹配實(shí)質(zhì)上是一個(gè)字符串匹配，所以在這里對(duì)于class屬性而言，詞條的順序是有關(guān)系的。

p[class="warning important"] { ...}

將不會(huì)匹配到p class="important warning"/p，也不會(huì)匹配到p class="warning important mini-type"，這里就是一個(gè)生硬的字符串匹配。

另外，想要同時(shí)匹配多個(gè)屬性的值也是可以的：

p[class="warning"][title="para"] { ...}

將匹配到類(lèi)為warning(僅有warning)，title屬性為para的p元素。

(3)部分屬性值選擇器

根據(jù)屬性值來(lái)匹配元素?zé)o疑比簡(jiǎn)單的屬性匹配更加精細(xì)化了，但是似乎有些精細(xì)化過(guò)頭了，字符串的完全匹配顯得過(guò)于生硬。比如我們希望選擇在一串屬性值中出現(xiàn)了某個(gè)關(guān)鍵字的元素，不妨再次以class屬性為例，我們希望選擇所有包含了warning類(lèi)的p元素，屬性值匹配將無(wú)法做到，好在還是有辦法的，我們可以使用以下的部分值匹配選擇器：

p[class~="warning"] { ...}

該選擇器在等號(hào)”=”前面添加了一個(gè)波浪號(hào)~，含義為包含后面的字串的匹配。以上代碼將會(huì)選擇所有class屬性中包含”warning”的p元素。為了更加清楚地說(shuō)明問(wèn)題，它和以下的選擇器是等價(jià)的：

p.warning { ...}

當(dāng)然~=不僅僅只是用在class屬性上，這只是一個(gè)示例。

再比如說(shuō)，我們的文檔中包含一系列人物介紹的div元素：

div title="intro 1".../div

div title="intro 2".../div

div title="intro 3".../div

我們可以使用以下的方式選擇所有人物簡(jiǎn)介div：div[title~="intro"] { ...}

不過(guò)遺憾的是div title="animal intro"也將會(huì)被選擇進(jìn)來(lái)，這是需要我們特別注意的地方。

關(guān)于部分值選擇器也有其局限性，它匹配的是由空格分隔的單詞，如果我們將上面的div寫(xiě)成下面的樣子就會(huì)匹配失敗：

div title="intro-1".../div

div title="intro-2".../div

div title="intro-3".../div

對(duì)于這種情況，我們可以使用子串匹配屬性選擇器。規(guī)則如下：

l div[title^="intro"] {...} //title以intro開(kāi)頭的div元素

l div[title$="intro"] {...} //title以intro結(jié)尾的div元素

l div[title*="intro"] {...} //title中包含"intro"子串的div元素

舉例來(lái)說(shuō)：

a[href*="google."] {...}

將包含所有鏈接中包含”google.”的a元素。

div[title$="y"] {...}

將包含以下所有div元素：

div title="cloudy".../div

div title="snowy".../div

div title="rainy".../div

可以看出部分值屬性選擇器的功能是十分強(qiáng)大的。

5、派生選擇器

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來(lái)進(jìn)行css選擇的。DOM結(jié)構(gòu)在此不再贅述了，但為了更加清楚地說(shuō)明問(wèn)題，我們這里給出一個(gè)DOM樹(shù)作為參考：

(1)后代選擇器(descendant selector)

如上圖，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：

body li { ...}

這里會(huì)選擇所有的li后代，也就是圖中的body下的所有l(wèi)i，不論他們之間相隔的代數(shù)有多少。同理，如果想要選擇h1元素下的span，可以使用以下代碼：

h1 span { ...}

如果我們要選擇擁有warning類(lèi)的元素的li后代，可以使用下面的方法：.warning li { ...}

當(dāng)然，如果希望只選擇擁有warning類(lèi)的div元素的li后代，可以寫(xiě)作：div.warning li { ...}

由上面的例子不難看出，后代選擇器的規(guī)則就是用空格連接2個(gè)或多個(gè)選擇器。空格的含義為：…的后代。多個(gè)選擇器的情況如下： ul li li { ...}

這樣，就會(huì)選擇所有ul下包含在li元素下的所有l(wèi)i元素了，聽(tīng)起來(lái)十分拗口，參考我們的DOM樹(shù)，會(huì)選擇到文檔樹(shù)種最后一排li元素。

(2)子元素選擇器(child selector)

子元素選擇器和后代選擇器不同，它只能選擇某元素的直接后代，不能跨代選取，用法如下：ul li { ...}

兩個(gè)子元素中間用一個(gè)大于號(hào)連接。上面的代碼會(huì)選擇到所有ul元素的直接li子元素。對(duì)應(yīng)到DOM樹(shù)中，所有的li元素都會(huì)被選中，原因是圖中所有的li元素都是ul的子元素。

但是，以下代碼將不會(huì)選中任何元素：h1 span { ...}

由于span是h1的”孫子元素”，h1沒(méi)有直接的span子元素，因而上面的代碼將不會(huì)選到任何結(jié)果。其他方面和后代元素類(lèi)似，需要特別注意的就是子元素選擇器不能隔代選取。

(3)相鄰兄弟選擇器(Adjacent sibling selector)

相鄰兄弟選擇器，故名思意將會(huì)選取某個(gè)元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實(shí)際上選取的是緊跟在后面的兄弟元素。

相鄰兄弟選擇器在實(shí)踐中有比較不錯(cuò)的應(yīng)用，例如，你想在一個(gè)h2標(biāo)題后面的段落應(yīng)用某種獨(dú)到的樣式或者希望在某類(lèi)p段落后的table上添加一個(gè)額外的邊距等等。它的用法如下：

li + li { ...}

以上代碼會(huì)選擇所有作為li相鄰元素的li元素，聽(tīng)起來(lái)又有點(diǎn)拗口，參考DOM樹(shù)，它會(huì)選擇除了排在第一個(gè)li元素的其余4個(gè)li元素，因?yàn)?個(gè)排在第1的li元素沒(méi)有更靠前的兄弟元素來(lái)選擇它。

再比如：h1 + p { ...} 會(huì)選擇所有緊跟h1后面的p兄弟元素。h1.warning + p { ...} 會(huì)選擇所有有用warning類(lèi)的h1元素后面緊跟的p兄弟元素。

(4)幾種派生選擇器的結(jié)合使用

實(shí)際上，以上介紹的幾種派生選擇器可以結(jié)合使用，看下面的例子：

html body li.warning + li { ...}

上面的選擇器含義為：html元素的body子元素中，所有擁有warning類(lèi)的li元素的相鄰兄弟元素。

css有哪些選擇器

CSS中常用的選擇器：

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

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

(一)基本選擇器

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

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

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

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

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

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

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

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

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

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

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

例：p a { color:red; }

2.子代選擇器：用隔開(kāi)基本選擇器，表示后一個(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)偽類(lè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)偽類(lèi)選擇器

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

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

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

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

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

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

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

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è)該類(lèi)型的孩子

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

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

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

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類(lèi)名中包含有c字母的E元素

4. E[attr^="val"] attr屬性值以val 開(kāi)頭 的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-)

文章標(biāo)題：css樣式中的選擇器嚴(yán)格,css樣式規(guī)則是由選擇器和聲明構(gòu)成的
網(wǎng)站路徑：http://chinadenli.net/article27/dsieccj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站維護(hù)、移動(dòng)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(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)