css 覆盖原则和权重计算

覆盖原则

1、最近原则（继承覆盖）：当与继承样式发生冲突时，最近祖先获胜。

2、最直接原则：继承样式和直接指定冲突时，直接指定样式获胜

3、权重原则：直接指定样式发生冲突时，权值大者获胜

4、样式权值相同时，后者获胜

5、!important样式属性不被覆盖

权重计算规则（从0开始）：

1、元素名/伪元素　　　　　　+1

2、class/属性选择器/伪类　　+10

3、id　　　　　　　　　　　  +100

4、行内样式（内联样式）　　 +1000

补充

 

伪元素选择器只包含以下几种:

1、::after
2、::before
3、::first-letter
4、::first-line
5、::selecton

权重计算测试：

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素，一个伪元素)
04. ul li {}                    ====》2（两个元素）
05. ul ol+li{}                  ====》3（三个元素）
06. h1+ *[rel=up] {}            ====》11（一个属性选择器，一个元素）
07. ul ol li.red{}              ====》13（一个类，三个元素）
08. li.red.level{}              ====》21（两个类，一个元素）
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1（一个元素）
11. div p {}                    ====》2（两个元素）
12. .sith {}                    ====》10（一个类）
13. div p.sith{}                ====》12（一个类，两个元素）
14. #sith{}                     ====》100（一个ID选择器）
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

CSS三种级联方式

1、外联式

在 HTML 中的外部级联采用 <link> 标记或者 @import 语句来引入

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

2、使用 <style> 标记将样式定义为内部块对象

<style type="text/css">
<!--
body{font-family:Arial,Helvetica,sans-serif;}
-->
</style>

内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力

3、嵌入式

<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>

这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。