css - 层叠 - 个人学习笔记

理解层叠
有三个因素需要考虑，根据重要性排序如下，前面的更重要：

1.重要程度
2.优先级
3.资源顺序

1、资源顺序
如果给某个页面元素设置多个样式，这些样式如果权重相同，那么写在后面的样式会在元素上生效。

2、优先级
有些规则写在后面没有生效，写在前面却生效了，这是因为前面的这些规则限定范围更小，浏览器就把它作为浏览器的样式，或者说浏览器认为他们是优先级更高的。例如类选择的权重大于元素选择器，例如在<style></style>里给界面元素先设定

.box { 
	color: green; 
} 
p {
	color：red
}

最后会发现，字体颜色为绿色。这样做的好处就是可以避免重复的css，不需要为每个样式都设定样式。一种常见的做法是给基本元素设定通用的样式，然后创建了一些类只修改部分属性的值。

浏览器如何计算优先级？

我们已经知道一个元素选择器比类选择器的优先级更低会被其覆盖。
本质上，不同选择器有不同的分数值，把这些分数相加就会得到特定选择器的权重，然后就可以进行匹配。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

1、千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
2、百位： 选择器中包含ID选择器则该位得一分。
3、十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
3、个位：选择器中包含元素、伪元素选择器则该位得一分。

注: 通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

警告: 在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为 两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

例如：

在我们继续之前，先看看这个例子。

/* specificity: 0101 */
#outer a {
    background-color: red;
}
        
/* specificity: 0201 */
#outer #inner a {
    background-color: blue;
}

/* specificity: 0104 */
#outer div ul li a {
    color: yellow;
}

/* specificity: 0113 */
#outer div ul .nav a {
    color: white;
}

/* specificity: 0024 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* specificity: 0023 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

a {
    display: inline-block;
    line-height: 40px;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    width: 200px;
    margin-bottom: 10px;
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}            
    

<div id="outer" class="container">
    <div id="inner" class="container">
        <ul>
            <li class="nav"><a href="#">One</a></li>
            <li class="nav"><a href="#">Two</a></li>
        </ul>
    </div>
</div>
    

!important
有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值， 能够覆盖普通规则的层叠。

看看这个例子，有两个段落，其中一个有ID。

#winning {
    background-color: red;
    border: 1px solid black;
}
    
.better {
    background-color: gray;
    border: none !important;
}
    
p {
    background-color: blue;
    color: white;
    padding: 5px;
}           
    

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

注： 覆盖 !important 唯一的办法就是另一个 !important 具有 相同优先级 而且顺序靠后，或者更高优先级。

在一种情况下，你可能不得不使用它：当你不能编辑核心的CSS模块，不能用任何其他方式覆盖，而你又真的想要覆盖一个样式时。但说真的，如果可以避免的话就不要用它。