CSS學習筆記之選擇符

---

類型，類和ID選擇器

• 帶有空格的字體名稱要用''引發來
• 對選擇器分組可以使同一規則適用於多個選擇器，例子以下

th,td {
    padding:0 10px 00;
}

• 選項的優先級

h1 {
    font-family:'Times New Roman',serif;
}
//先選用前者，沒有前者，再使用後者

• 類型名與類名中間不該有空格 div.btn-success
• 通用選擇器*，適用於文檔全部元素

* {
    font-family:Arial;
}

• 後代選擇器

div.planet table td {
    padding:0 10px 0 0;
}
//是類爲planet的div元素的後代table的後代的td樣式

• 萬萬牢記，上下文選擇符以空格做爲分隔符，而分組選擇符則以逗號做爲分隔符，不要弄混。
• 子選擇符>

section > p{
    font-style:Italic;
}
//section的子元素p

• 同胞選擇符～和+

section ~ p {
    font-style:Italic;
}
//p在section後面就行
section + p {font-style:Italic;}
//p必須緊跟section

• 非子選擇符

selection * a {
    ***;
}
//全部是selection元素孫子的a元素

• ID選擇器 #

屬性選擇器

• 標籤名[屬性="屬性值"]

img[title="hh jj"]{...}

僞類選擇器：動態事件，狀態改變

a:visited {
    color:mangenta;
}
//被訪問過的連接

UI僞類

連接僞類

• Link。此時，連接就在那兒等着用戶點擊。
• Visited。用戶此前點擊過這個連接。
• Hover。鼠標指針正懸停在連接上。
• Active。連接正在被點擊（鼠標在元素上按下，尚未釋放）。

focus僞類——鼠標放在上面

input:focus {border:1px solid blue;}

target僞類

<a href="#more_info">More Information</a>  
//位於頁面其餘地方、ID 爲 more_info 的那個元素就是目標。該元素多是這樣的：


<h2 id="more_info">This is the information you are looking for.</h2>


//那麼，以下 CSS 規則
#more_info:target {background:#eee;}

結構化僞類

• first-child 一組同胞元素的第一個
• last-child
• nth-child(3) 一組同胞元素的第三個

僞元素——似有實無的元素

• first-letter
• first-line
• before 和 after

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//在類爲age的p元素前面增長一段Age： 
p::first-letter {font-size:300%;}
//放大p的第一個字母

繼承和層疊

• 瀏覽器默認樣式表
• 用戶樣式表
• 做者連接樣式表（按照它們連接到頁面的前後順序）
• 做者嵌入樣式
• 做者行內樣式

• 越後面優先級越高

• 規則一：包含 ID 的選擇符賽過包含類的選擇符，包含類的選擇符賽過包含標籤名的選擇符。

• 規則二：若是幾個不一樣來源都爲同一個標籤的同一個屬性定義了樣式，行內樣式賽過嵌入樣式，嵌入樣式賽過連接樣式。在連接的樣式表中，具備相同特指度的樣式，後聲明的賽過先聲明的。

• 規則一賽過規則二。換句話說，若是選擇符更明確（特指度更高），不管它在哪裏，都會勝出。

• 規則三：設定的樣式賽過繼承的樣式，此時不用考慮特指度（即顯式設定優先）。下面簡單解釋一下規則三。好比下面的標記

Inheritance is weak in the Cascade

和下面的規則
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
會致使單詞「weak」變成藍色，由於它從父元素 p 那裏繼承了這個顏色值。
可是，只要咱們再給 em 添加一條規則
em {color:red;}
0 - 0 - 1 （低特指度）
em 就會變成紅色。由於，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會被爲它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規則的特指度高（2-0-2）也沒有用。