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的继承是指,一些设置在父级元素上的属性可以被子元素继承来,有些属性不能被子元素继承。

举个例子:如果你在一个父元素上设置了 colorfont-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 具有 相同优先级 而且顺序靠后,或者更高优先级。

本作品采用《CC 协议》,转载必须注明作者和本文链接
微信公众号:码咚没 ( ID: codingdongmei )
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 1
<h1>This is a test</h1>

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

后面覆盖前面的话 , 这块应该是蓝色吧

2年前 评论
reggie (楼主) 2年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!