CSS選擇器及僞類

選擇器的優先級排序

1.    ! important
          在屬性的後面寫上時，會覆蓋掉其他屬性
2.   行內樣式，直接寫在標籤內
3.   id選擇器
4.   class選擇器（類選擇器）
5.   標籤選擇器
6.   通配符選擇器（*）
7.   瀏覽器的自定義屬性和繼承

序號即是優先級

---

屬性選擇器

title可以爲任何值

[title=hello]
{
;
}

根據部分屬性：

1. [title~=en]：意爲元素含有由空格分隔的en的屬性值
2. [title|=en]：意爲元素含有由連字符 - 分隔的en開頭的屬性值

---

子串匹配屬性選擇器

---

特定屬性選擇類型

[attribute|="value"]{}
例如img[src|="figure"] {border: 1px solid gray;}
指定某一個屬性的某一個單詞-開頭的元素進行設置，必須是整個單詞

這種屬性選擇器最常見的用途是匹配語言值

---

CSS 後代選擇器

例如p em {color:red;}

這個規則會把作爲 p 元素 後代 的所有 em 元素的文本變爲 紅色

CSS 子元素選擇器

例如p > em {color:red;}
這個規則會把作爲 p 元素 子代 的所有 em 元素的文本變爲 紅色

結合後代選擇器和子選擇器

例如table.company td > p

上面的選擇器會選擇作爲 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性

---

CSS 相鄰兄弟選擇器

例如h1 + p {color:red;}

緊接在 h1 元素後的 p 元素，且擁有相同的父元素, p 元素的文本顏色變爲紅色

只有從第二個開始的纔會有效，因爲第一個h1沒有（哥哥）

還有一個是 ~ ，例如h1 ~ p {color:red;}，它會是 h1 元素後面的所有同級的 p 元素的文本顏色變爲紅色

---

CSS 僞類

1. :focus僞類可以設置當input元素被“關注時”的屬性
2. :first-child僞類設置元素其父元素內的第一個該元素的屬性
   例如p:first-child {font-weight: bold;}
3. :lang僞類
4. 關於鏈接未訪問、已訪問、鼠標停留、正在訪問的僞類

---

CSS 僞元素

1. :first-line僞元素

用於向文本的首行設置特殊樣式

"first-line" 僞元素只能用於塊級元素

2. :first-letter 僞元素

用於向文本的首字母設置特殊樣式

:first-letter 僞元素同樣只能用於塊級元素

3. :before 僞元素：在元素的內容前面插入新內容

4. :after 僞元素：在元素的內容之後插入新內容

示例 p:before/after {content: ;}

---