CSS的三大特性总结(深入理解css权重)

【目录】

• css的三大特性
  • 层叠性
    • 特性说明
    • 原理
    • DEMO
  • 继承性
    • 优缺点
    • 重点
    • DEMO
      • html代码
      • css代码
  • 优先级
    • css特殊性（权重Specificity）
    • 计算规则
    • 总结
    • DEMO

层叠性

CSS(Cascading Style Sheets)又称为层叠样式表，所以这个第一个特性就是层叠性。

要说层叠性就要先明确一个定义：样式冲突 。因为层叠性就是解决样式冲突的问题的。

特性说明

样式冲突 是指一个标签指定了相同样式同值的情况。一般情况，如果出现样式冲突，会按照书写顺序最后的为准 。

原理

这种特性的原理与浏览器的渲染原理有关:

一般打开网页，会先下载文档内容，加载头部的样式资源，然后按照从上而下，自外而内的顺序渲染DOM内容。

所以在运行的过程中，上面的样式先执行，下面的样式元素会将上面的层叠掉 。

DEMO

下面看一个小例子：

一个div，在head标签里面添加这个样式

然后会显示什么呢？

css1.jpg

可能到这里显示的不是很明白，那么F12审查元素看一下：

cssstyle.jpg

结论 :无论在同一个div中还是不在同一个div中，后面的样式将前面的层叠掉了，所以这就是css的层叠性。

继承性

所谓 继承性 是指书写css样式表时，字标签会继承父标签的某些样式，有一些样式是具有继承性的，想要设置一个可继承的属性，只需将它应用于父元素即可。

优缺点

优点	缺点
继承可以简化代码，降低css样式的复杂性。	如果在网页中所有的元素都大量使用继承样式，那么判断样式的来源就会很困难。

重点

并不是所有的css属性都可以继承，对于字体、文本属性等网页中通用的样式可以使用继承。例如：字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。而有一些属性就不具有继承性：边框、外边距、内边距、背景、定位、元素高属性。

可继承的（字体、文本属性等）	不可继承的
颜色、font-开头、text-开头、line-开头的、white-space	边框、外边距、内边距、背景、定位、高度
	浮动

下面来试验一下下，第一行的来个大锅烩看看：

DEMO

html代码

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
  
呵呵
  嘻嘻
  
嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿黑嘿嘿
哦~

css代码

.father{
  width: 300px;
  height: 200px;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  text-decoration: underline;
  line-height: 20px;
  background-color: green;
  color:greenyellow;
  margin: 5px;
  padding: 5px;
  position: relative;
}
.son{
  width: 90%;
  background-color: darkorange;
  position: absolute;
  bottom: 0;
  left: 0;
  color:#fff;
}

效果是什么呢？

inherited.jpg

分析：

是不是很不明显？用F12审查元素一下看看最里面的p元素，其中：

color属性继承自父亲.son

font-size\font-weight\text-align\line-height\white-space继承自.son的父亲.father

可以看到下面继承的元素显示的颜色比较深，没有继承的元素灰掉：

inherited1.jpg

优先级

定义css样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

css特殊性（权重Specificity）

关于css权重，我们需要一套计算公式去计算，这就是css特性。

元素	贡献值
继承、*	0，0，0，0
每个标签	0，0，0，1
类、伪类	0，0，1，0
ID	1，0，0，0
行内样式	1，0，0，0
!important	无穷大
max-height、max-width覆盖width、height	大于无穷大
min-height、min-width	大于max-height、max-width

计算规则

1. 遇到有贡献值的就进行累加，例如：
   div ul li ---> 0,0,0,3
.nav ul li ---> 0,0,1,2
a:hover ---> 0,0,1,1
.nav a ---> 0,0,1,1
#nav p ---> 0,1,0,1
2. 数位没有进位：
   0,0,0,5+0,0,0,5 = 0,0,0,10而不是0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况 。
3. 权重不会继承，所以父元素的权重再高也和子元素没有关系
4. 如果有!important那么相加的那些无论多高就不管用，如果有max-height/max-width那么!important不管用，如果同时有min-height/min-width和 max-height/max-width，那么max-height/max-width的不管用。

总结

min-height/min-width > max-height/max-width > !important > 行内样式 > ID选择器 > 类选择器、属性选择器、伪元素和伪类选择器 > 元素选择器 > 通用选择器

1. 使用了！important声明的规则；

2. 内嵌在HTML元素的style属性里面的声明；

3. 使用了ID选择器的规则

4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则

5. 使用过了元素选择器的规则

6. 只包含一个通用选择器的规则

DEMO

1. 给body指定样式，a标签和h标签都不会改变

  
正常文本
  
正常文本
  
正常文本
  
正常文本
  
正常文本
  
正常文本
  
正常文本
  连接文本
  连接文本
  连接文本
  
标题名称
  
标题名称
  
标题名称

效果：

demo1.jpg

因为a标签和h标签都是特殊的标签，都有自己的样式，要想改变，就应该在其元素中定义将元素的样式层叠掉。

body{
  font-size: 20px;
}
a{
  color: #000;
  text-decoration: none;
  font-size: 20px;
}
h1{
  font-size: 20px;
  font-weight: 400;
}

效果：

demo2.jpg

2. 面试题一：

   面试宝典

   1. 先找到影响文字的最里面的盒子
   2. 然后计算权重
   3. 如果权重一样，看层叠性

  

    试问这行文字是什么颜色？
  

3. 面试题二：

  

    字体颜色是什么？
  

4. 面试题三：（权重一样，层叠性就有用了）

  

    

      文字
    
  

5. max-width覆盖width

div{
  width: 480px!important;
  height: 300px;
  background-color: blueviolet;
  max-width: 200px;
}

demo3.jpg

6. min-width覆盖max-width，如果这两个发生冲突，最大的比最小的还要小，那么以哪个为准？

div{
  max-width: 300px!important;
  height: 300px;
  background-color: blueviolet;
  min-width: 500px;
}

demo4.jpg

version1.0 —— 2018/5/15，首次创建CSS的三大特性总结
©burning_韵七七