1.层叠性：

比如：一个元素设置了两个相同的样式；

div{
backgroung-color:red;
}
div{
background-color:blue;
}

<div></div>

上面一个div我给了两个不同的命令,我该执行那个呢？

答案是第二个离div标签近的那个blue颜色，要知道怎么回事，且听我下面慢慢道来：

概念：

  • 所谓层叠性是指多种CSS样式的叠加；
  • 是浏览器处理冲突的一个能力；如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉；

原则：

  • 样式冲突，遵循的原则是就近原则，那个样式隔着结构近，就执行那个样式。
  • 样式不冲突，不会层叠。

2.继承性：

子标签继承父标签的一些样式；

如：

div{
    color:blue;
}

<div><p>1</p></div>

给div一个样式红蓝色；p里面的内容也会变成蓝色；这就是继承了div的样式；

它并不会父元素有什么样式，子元素就会继承什么样式；

子元素可以继承父元素的样式：（text-，font-，line-，这些元素开头的可以继承；，以及color属性）

3.优先级：

当一个元素被多个选择器选中如：

div{
 color：green；
}
.colour{
 color:orange
}
<div>我是什么颜色</div>

选择器相同，则执行层叠性；

选择器不同，就会出现优先级的问题；

优先级计算：值从左到右，左边的最大，一级大于一级，数位之间没有进制，级别之间不可超越

继承或*  = 0,0,0,0
标签选择器 = 0,0,0,1
类（伪类） = 0,0,1,0
id选择器 = 0,1,0,0
行内样式 = 1,0,0,0
!important = 无穷大

!important > 内联 > ID > Class|属性|伪类 > 元素选择器

注意：不可进位如：十个标签选择不可叠加为：0,0,0,10；并不会逢十进一成：0,0,1,0

文章目录