CSS選擇符總結

本文簡單全面地介紹CSS中的各類類型的選擇符。包括 上下文選擇符、ID和類選擇符、屬性選擇符、僞類、僞元素等。

個人博客原文連接：anytimekaka.github.io/archivers/c…

上下文選擇符

通常上下文選擇符：

article h1 em {color:green;}
//選中的em 必須有一個祖先是h1，後者進而還要有一個祖先是article複製代碼

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

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

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

通用選擇符：使用*做爲通配符，匹配任何元素。

* {color:green;}
//能夠匹配全部元素，color爲前景色複製代碼

ID和類選擇符

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

類選擇符：

.specialtext {font-style:italic;}
//對於帶specicaltext類的標籤內內容有效
p.specialtext span {font-weight:blod;}
//對於處於帶有specialtext類的<p>標籤內的span標籤有效
<p class="specialtext">  <span>content</span>    </p>複製代碼

多類選擇符：

//對同時存在這兩個類名的元素產生做用
.specialtext.featured {font-size:120%;}
//兩個類名直接不能有空格，若是加了空格，就變成了「上下文」選擇符了！
<p class="specialtext featured">  content </p>複製代碼

ID選擇符：與類選擇符基本同樣

#specialtext {CSS樣式聲明;}
<p id="specialtext "> content </p>複製代碼

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

<a href="#bio">Biography</a>帶有#的連接表示此連接是導航連接，若是沒有#，瀏覽器默認加載bio目錄下的默認頁面。若是隻有一個#，表示返回頁面頂部。另外，若是暫時不知道一個href應該設置什麼URL，應該以#做爲佔位符。

何時用id，何時用class

id能夠惟一標識一個元素，因此，當須要標識頁面的一個惟一獨立的部分時，可使用id，例如頁面導航欄等。

class一般用於表示一類元素，例如一個頁面有多個按鈕，能夠爲這些按鈕設置同樣的樣式。

屬性選擇符

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

img[title] {border:2px solid blue;}
<img src="" title="flower" alt="flower"/>
//帶有title的img元素會顯示2像素寬的藍色邊框，title屬性是什麼值無所謂，只要有title這個屬性複製代碼

屬性值選擇符：標籤名[屬性名=屬性值]。與屬性名選擇符基本相似，只是爲屬性名添加了特定的值限制。

img[title="flower"] {border:2px solid blue;}
<img src="" title="flower" alt="flower"/>
//title="flower"的img元素會顯示2像素寬的藍色邊框複製代碼

前面介紹的都是針對具體的HTML元素定義的css樣式，例如根據標籤名、類名、ID、屬性值來肯定展現的樣式。可是在某些動做發生時，例如得到鼠標焦點，這一類事件發生時對樣式的影響。這就是咱們即將討論的僞類了。

僞類

從字面意義上，咱們能夠覺得僞類與前面說的類類似，可是其實是有本質區別的。

僞類有兩種：

• UI僞類：會在HTML元素處於某個狀態時（好比鼠標指針位於連接上），爲該元素應用CSS樣式
• 結構化僞類：當標記中存在某種結構關係時，爲相應元素應用CSS樣式

UI僞類

連接僞類

最常使用UI僞類的元素是連接，利用UI僞類，連接能夠在用戶鼠標懸停時改變文本顏色，或者去掉文本的下劃線等。

a:link {color:black;}    //連接的展現狀況
a:visited {color:orange;}    //訪問過的連接
a:hover {text-decoration: none;}    //鼠標懸停（不顯示下劃線）
a:active {color: red;}    //連接正在被點擊
//因爲這四個僞類的特指度相同，若是不按照上面的順序使用，瀏覽器可能不會正常顯示。複製代碼

有些僞類能夠用於任何元素，而不只僅是連接，例如hover：

p:hover {background-color:gray;}複製代碼

:focus（焦點）僞類

input:focus {border: 3px solid blue;}複製代碼

當input元素得到焦點，光標位於input元素上時，添加一個藍色的邊框。可讓用戶明確地知道當前的光標焦點。

:target（目標）僞類

若是用戶點擊一個指向頁面中其它元素的連接，則那個元素就是目標（target），可使用target僞類選中它。例如以下html代碼：

<a href="#moreinfo">Get more information? Click here!</a>
<p id="moreinfo">Some detail info will be shown here.</p>複製代碼

就可使用CSS規則進行修飾：

#moreinfo:target {background-color: #eee;}複製代碼

當用戶單擊連接轉向ID爲moreinfo的元素時，爲該元素添加淺灰色背景。維基百科在引用中大量使用了:target僞類。

結構化僞類

結構化僞類能夠根據標記的結構應用樣式，好比根據元素的父元素或前面的同胞元素是什麼。

:first-child和:last-child

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

ol.result li:first-child {color:blue;}

<ol class="result">
    <li>My fast pony</li>    //選中，藍色
    <li>My fast pony</li>
    <li>My fast pony</li>
</ol>複製代碼

:nth-child(n)

n表示一個數值（odd、even）。例如li:nth-child(2)會選中列表中的第二項。此僞類經常使用於提升表格的可讀性。

僞元素

僞元素是文檔中如有實無的元素。

p::first-letter {font-size: 300%;}       //段落的首字母放大三倍
p::first-line {font-variant:small-caps;}    //把第一行以小型大寫字母顯示
p.age::before {content: "Age: ";}
p.age::after {content:" years";}

<p class="age">25</p>    //顯示：Age: 25 years複製代碼

選擇符總結

理解選擇符是學習CSS的基礎，如今的網站開發基本不會將樣式寫在HTML文檔中，都是獨立出CSS靜態文件。並且選擇符也使得管理樣式更加簡單。

經常使用的選擇符主要有這些：上下文選擇符，ID和類選中符，僞類中的幾個，僞元素使用比較少。全部的選擇符能夠參考這裏stylinwithcss