面試總結【css篇】- css選擇器以及優先級

時間 2019-11-19

標籤面試總結 css篇 css 選擇器以及優先級欄目快樂工作简体版

原文原文鏈接

優先（優先級爲）： !important > 內聯樣式 > #id > .class > tag > * > 繼承 > 默認。web

當選擇器的權重相同時，它將應用於就近原則。正則表達式

權重的計算方式：express

-----------------------------------------------------ui

來源： MDN web docs 編碼

不一樣種類的CSS選擇器：spa

選擇器能夠被分爲如下類別：3d

- 簡單選擇器（Simple selectors）：經過元素類型、class 或 id 匹配一個或多個元素。指針

- 屬性選擇器（Attribute selectors) : 經過屬性 / 屬性值匹配一個或多個元素。code

- 僞類 (Pseudo-classes) ：匹配處於肯定狀態的一個或多個元素，好比被鼠標指針懸停的元素，或當前被選中或未選中的複選框，blog

或元素是DOM樹中一父節點的第一個子節點。

- 僞元素（Pseudo-elements) : 匹配處於相關的肯定位置的一個或多個元素，例如每一個段落的第一個字，或者某個元素以前生成的內容。

- 組合器（Combinators) ：這裏不單單是選擇器自己，還有以有效的方式組合兩個或更多的選擇器用於很是特定的選擇的方法。

例如，你能夠只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。

- 多重選擇器（Multiple selectors) ：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面，

以將一組聲明應用於由這些選擇器選擇的全部元素。

-----------------------------------------------------

屬性選擇器：

(1) 存在和值 (Presence and value)屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

- [attr] : 該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。

- [attr=val] : 該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。

- [attr~=val] : 該選擇器僅選擇具備 attr 屬性的元素，並且要求 val 值是 attr 值包含的被空格分隔的取值列表裏中的一個。

讓咱們看一個特別的例子，下面是它的HTML代碼：

個人食譜配料： <i lang="fr-FR">Poulet basquaise</i>
<ul>
    <li data-quantity="1kg" data-vegetable>Tomatoes</li>
    <li data-quantity="3" data-vegetable>Onions</li>
    <li data-quantity="3" data-vegetable>Garlic</li>
    <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
    <li data-quantity="2kg" data-meat>Chicken</li>
    <li data-quantity="optional 150g" data-meat>Bacon bits</li>
    <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
    <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

和一個簡單的樣式表：

/* 全部具備"data-vegetable"屬性的元素將被應用綠色的文本顏色 */
[data-vegetable] {
    color: green;
}
/* 全部具備"data-vegetable"屬性且屬性值恰好爲"liquid"的元素將被應用金色的背景顏色 */
[data-vegetable = "liquid"] {
    background-color: goldenrod;
}

/* 全部具備"data-vegetable"屬性且屬性值包含"spicy"的元素，
即便元素的屬性中還包含其餘屬性值， 都會被應用紅色的文本顏色 */
[data-vegetable~="spicy"] {
    color: red;
}

結果以下：

(2) 子串值（Substring value) 屬性選擇器

這種狀況的屬性選擇器也被稱爲"僞正則選擇器"，由於它們提供相似 regular expression 的靈活匹配方式（但請注意，這些選擇器並非真正的正則表達式）：

- [attr |= val] ：選擇 attr 屬性的值是 val 或值以 val- 開頭的元素（注意，這裏的 "-" 不是一個錯誤，這是用來處理語言編碼的）。

- [attr ^= val] : 選擇 attr 屬性的值以 val 開頭（包括 val）的元素。

- [attr $= val] : 選擇 attr 屬性的值以 val 結尾（包括 val) 的元素。

- [attr *= val] : 選擇 attr 屬性的值中包含子字符串 val 的元素（一個子字符串就是一個字符串的一部分而已，例如， "cat" 是字符串 "caterpillar" 的子字符串）。

讓咱們繼續咱們前面的例子，並添加如下CSS規則：

/* 語言選擇的經典用法 */
[lang |= "fr"] {
     font-weight: bold;
}
/* 具備"data-vegetable"屬性含有值"not spicy"的全部元素，都變回綠色*/
[data-vegetable*="not spicy"] {
    color: green;
}
/* 具備"data-quantity"屬性其值以"kg"結尾的全部元素 */
[data-quantity$="kg"] {
    font-weight: bold;
}
/* 具備屬性"data-quantity"其值以"optional"開頭的全部元素 */
[data-quantity^="optional"] {
    opacity: 0.5;
}

-----------------------------------------------------

僞類（Pseudo-class)

一個CSS僞類（Pseudo-class)是一個以冒號（：）做爲前綴，被添加到一個選擇器末尾的關鍵字，當你但願樣式在特定狀態下才被呈現到指定的元素時，

你能夠往元素的選擇器後面加上對應的僞類（pseudo-class)。你可能但願某個元素在處於某種狀態下呈現另外一種樣式，例如當鼠標懸停在元素上面時，

或者當一個複選框被禁用或被勾選時，又或者當一個元素是它在DOM樹中父元素的第一個子元素時。

:active :indeterminate :only-of-type

:any :in-range :optional

:checked :invalid :out-of-range

:default :lang() :read-only

:dir() :last-child :read-write

:disabled :last-of-type :required

:empty :left :right

:enabled :link :root

:first :not() :scope

:first-child :nth-child() :target

:first-of-type :nth-last-child() :valid

:fullscreen :nth-last-of-type() :visited

:focus :nth-of-type()

:hover :only-child

一個僞類（Pseudo-class)的例子：

<a href="#" target="_blank">百度一下</a>

一些樣式：

/* 這些樣式將在任何狀況下應用於咱們的連接 */
a {
    color: blue;
    font-weight: bold;
}
/* 咱們想讓被訪問過的連接和未被訪問的連接看起來同樣 */
a:visited {
    color: blue;
}
/* 當光標懸停於連接，鍵盤激活或鎖定連接時，咱們讓連接呈現高亮 */
a:hover, a:active, a:focus {
    color: darkred;
    text-decoration: none;
}