共计 701 个字符，预计需要花费 2 分钟才能阅读完成。
前言
说一下写本文的起因，所有起源于共事的一个问题：
从图中能够看到，文字显示的红色而非黄色，概念上的css 权重被齐全颠覆了，那么先抛开这个问题，具体讲讲 css 权重到底是什么。
权重
从上文能够看到，当一个元素被利用了多套款式规定时，浏览器须要决定优先应用哪套款式规定，而这就是通过最终权重决定。
权重值划分：
!important权重值 +∞- 内联款式
style权重值 1000 - id 选择器
#id权重值 100 - 类选择器
.class、伪类、属性选择器[attribute=]权重值 10 - 标签选择器
div、伪元素 权重值 1 - 通配符
*、子选择器>、同胞选择器+等关系选择器 权重值 0
优先级规定：
- 以上例权重划分值程序从高到低比拟，高等级雷同时，比拟下一等级，以此类推
- 完全相同时，后定义的款式笼罩后面
- 低权重选择器无奈越级高权重，例如二十个标签选择器优先级低于一个类选择器，但 css 是 256 进制的，超过二百五十六个时就会产生越级
- 为指标元素间接增加款式，永远比继承款式的优先级高，忽视权重规定
论断
相熟完了权重和优先级相干常识后，回到正题来。
从图中能够看到一个要害信息点，款式并没有产生互相笼罩，所以依据规定 4 大胆猜想下，伪元素::first-line 其实是在 div 底下申明了个新的虚构容器包裹住原文本元素，它继承了父元素的属性，但本人的款式属性还是会笼罩父元素属性。同理的还有::first-child。
引申
应用 !important 是一个坏习惯，尽管没有性能问题，但它毁坏了样式表中固有的权重等级，使得调试找 bug 变得更加艰难，所以尽量思考应用款式规定的优先级来解决问题。
参考文档
https://developer.mozilla.org…
正文完