CSS選擇符總結

anytimekaka發表於2016-11-03
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

相關文章