面试总结【css篇】- css选择器以及优先级

优先（优先级为）： !important > 内联样式 > #id > .class > tag > * > 继承  > 默认 。

当选择器的权重相同时，它将应用于就近原则。

 

权重的计算方式：

 

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

来源： MDN web docs 

 

不一样种类的CSS选择器：

选择器能够被分为如下类别：

- 简单选择器 （Simple selectors）：经过元素类型、class 或 id 匹配一个或多个元素。

- 属性选择器 （Attribute selectors) : 经过 属性 / 属性值 匹配一个或多个元素。

- 伪类 (Pseudo-classes) ：匹配处于肯定状态的一个或多个元素，好比被鼠标指针悬停的元素，或当前被选中或未选中的复选框，

或元素是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;
}    

 

 

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

组合器和选择器组

虽然一次使用一个选择器就颇有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用链接符展现了这些关联关系(A和B表明前文所述的任意选择器):