CSS選擇器最全總結與講解

css選擇符總結

本文簡單全面地介紹css中的各種型別的選擇符。包括上下文選擇符、id和類選擇符、屬性選擇符、偽類、偽元素等。

**自：

一般上下文選擇符：

article h1 em //選中的em 必須有乙個祖先是h1，後者進而還要有乙個祖先是article

子選擇符：label1>lalel2。label1必須是label2的父元素，不能是其他的上級元素。

一般同胞選擇符：label1~label2，label2必須跟在同胞標籤label1的後面，不一定緊跟。

緊鄰同胞選擇符：label1+label2，label2必須緊跟label1的後面。

通用選擇符：使用*作為萬用字元，匹配任何元素。

* //可以匹配所有元素，color為前景色

id和類選擇符在使用時，不需要考慮html文件的層次結構，只要再標籤中新增id和class屬性，body標籤中的任何元素都可以新增這兩個屬性。

類選擇符：

.specialtext //對於帶specicaltext類的標籤內內容有效 p.specialtext span //對於處於帶有specialtext類的標籤內的span標籤有效 contentspan> p>

多類選擇符：

//對同時存在這兩個類名的元素產生作用 .specialtext.featured //兩個類名直接不能有空格，如果加了空格，就變成了「上下文」選擇符了！ content p>

id選擇符：與類選擇符基本一樣

#specialtext 
content p>

id與class的區別：id可用於頁面內導航。

biography帶有#的鏈結表示此鏈結是導航鏈結，如果沒有#，瀏覽器預設載入bio目錄下的預設頁面。如果只有乙個#，表示返回頁面頂部。另外，如果暫時不知道乙個href應該設定什麼url，應該以#作為佔位符。

什麼時候用id，什麼時候用classid可以唯一標識乙個元素，所以，當需要標識頁面的乙個唯一獨立的部分時，可以使用id，例如頁面導航欄等。

class通常用於表示一類元素，例如乙個頁面有多個按鈕，可以為這些按鈕設定一樣的樣式。

屬性名選擇符：標籤名[屬性名]

img[title] //帶有title的img元素會顯示2畫素寬的藍色邊框，title屬性是什麼值無所謂，只要有title這個屬性

屬性值選擇符：標籤名[屬性名=屬性值]。與屬性名選擇符基本類似，只是為屬性名新增了特定的值限制。

img[title="flower"] 
//title="flower"的img元素會顯示2畫素寬的藍色邊框

前面介紹的都是針對具體的html元素定義的css樣式，例如根據標籤名、類名、id、屬性值來確定展示的樣式。但是在某些動作發生時，例如獲得滑鼠焦點，這一類事件發生時對樣式的影響。這就是我們即將討論的偽類了。

從字面意義上，我們可以以為偽類與前面說的類相似，但是實際上是有本質區別的。

偽類有兩種：

結構化偽類：當標記中存在某種結構關係時，為相應元素應用css樣式

鏈結偽類

最常使用ui偽類的元素是鏈結，利用ui偽類，鏈結可以在使用者滑鼠懸停時改變文字顏色，或者去掉文字的下劃線等。

a:link //鏈結的展示情況 a:visited //訪問過的鏈結 a:hover //滑鼠懸停（不顯示下劃線） a:active //鏈結正在被點選 //由於這四個偽類的特指度相同，如果不按照上面的順序使用，瀏覽器可能不會正常顯示。

p:hover

:focus（焦點）偽類

input:focus

當input元素獲得焦點，游標位於input元素上時，新增乙個藍色的邊框。可以讓使用者明確地知道當前的游標焦點。

:target（目標）偽類

get more information? click here!a>
some detail info will be shown here.p>

就可以使用css規則進行修飾：

#moreinfo:target

當使用者單擊鏈結轉向id為moreinfo的元素時，為該元素新增淺灰色背景。維基百科在引用中大量使用了:target偽類。

結構化偽類可以根據標記的結構應用樣式，比如根據元素的父元素或前面的同胞元素是什麼。

:first-child和:last-child

:first-child表示一組同胞元素中的第乙個元素，last-child是最後乙個

ol.result li:first-child 
my fast ponyli> //選中，藍色
my fast ponyli>
my fast ponyli>
ol>

:nth-child(n)n表示乙個數值（odd、even）。例如li:nth-child(2)會選中列表中的第二項。此偽類常用於提高**的可讀性。

偽元素是文件中若有實無的元素。

p::first-letter //段落的首字母放大三倍 p::first-line //把第一行以小型大寫字母顯示 p.age::before p.age::after 25p> //顯示：age: 25 years

理解選擇符是學習css的基礎，現在的**開發基本不會將樣式寫在html文件中，都是獨立出css靜態檔案。而且選擇符也使得管理樣式更加簡單。

常用的選擇符主要有這些：上下文選擇符，id和類選中符，偽類中的幾個，偽元素使用比較少。

CSS選擇器最全總結與講解

CSS最全選擇器

jQuery 選擇器大全總結

jQuery 選擇器大全總結

CSS選擇器最全總結與講解

CSS最全選擇器

jQuery 選擇器大全總結

jQuery 選擇器大全總結

相關推薦