CSS基础分享 - 乐耶园

最近准备重新学下CSS，找了MDN看了下基础内容，做下总结！

CSS层叠

所谓CSS的层叠就是指当一个元素应用了两条（或大于两条）同级别的规则时，写在最后的规则最终会生效

CSS优先级

在CSS中如果对同一元素应用了不同的样式，一般来讲会是最后设置的样式生效。

举个例子：

<h1>This is a test</h1>

h1 {
    color: red;
}
h1 {
    color: blue;
}

最终会显示蓝色。因为他们是同一级别的选择器，后面的会覆盖前面的。

记住一个优先级权重就好了：

元素选择器：会选择页面上所有该类型的元素，所以它的权重较低

类选择器：它会选择该页面中有特定 class 属性值的元素,所以它的权重相对高一些

ID选择器：因为ID是要唯一的，所以它只会有一个同名ID的元素选中，所以它的权重最高

权重高的选择器优先执行它的样式，不会覆盖，只有同一级别的选择器才会出现后面覆盖前面的情况。

特别说明：CSS的优先级只针对 同一属性 生效！！！(一定要注意是针对的相同属性，并不会覆盖所有规则)

CSS继承

所谓CSS的继承是指，一些设置在父级元素上的属性可以被子元素继承来，有些属性不能被子元素继承。

举个例子：如果你在一个父元素上设置了 color 和 font-family, 则它的每个子元素都默认继承了这2个属性(子元素设置又重新设置了的不算，因为子元素的设置会覆盖从父元素那继承来的属性值)

<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>

body {
    color: blue;
}
span {
    color: black;
}

最终结果如下图所示：

一些属性是不能继承的 — 举个例子如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50%!

浏览器如何计算CSS权重

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

千位：如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。

百位：选择器中包含ID选择器则该位得一分。

十位：选择器中包含类选择器、属性选择器或者伪类则该位得一分。

个位：选择器中包含元素、伪元素选择器则该位得一分。

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

举个例子：

/* 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;
}

注释里已经计算好了优先级的值。

前面两个选择器都是链接背景颜色的样式 — 第二个赢了使得背景变成蓝色因为它多了一个ID选择器：优先级 201 vs. 101。
第三四个选择器都是链接文本颜色样式 — 第二个（第四个）赢了使得文本变成白色因为它虽然少一个元素选择器，但是多了一个类选择器，多了9分。所以优先级是 113 vs. 104。
第5到7个选择器都是鼠标悬停时链接边框样式。第六个显然输给第五个优先级是 23 vs. 24 — 少了个元素选择器。第七个，比第五第六都高 — 子选择器数量相同，但是有一个元素选择器变成类选择器。所以最后优先级是 33 vs. 23 和 24。

CSS中的 !important

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

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