CSS-三大特性


css三大特性

重叠性、继承性和权重选择

重叠性

对于同一个标签使用的样式,后面的样式会覆盖前面的样式

继承性

子标签会继承父标签的样式,主要是文字样式

Snipaste_2020-04-13_10-18-06

权重

不同类型的选择器选择了相同的标签,会根据权重进行选择使用

选择器类型 权重
继承 或 通配符选择器 0,0,0,0
标签选择器 0,0,0,1
类选择器 0,0,1,0
ID选择器 0,1,0,0
行内样式 1,0,0,0
import 无穷大

Snipaste_2020-04-13_10-32-34

范围越小,权重越大

注意

  • 继承的权重为0

虽然span的父级的类选择器的权重比span标签选择器的权重高,但是span标签是继承父类选择器的权重为0

  • 关于a标签的继承

虽然a标签直接继承父级选折起的样式,但是颜色却没有变红,是应为浏览器默认给a标签加了一个样式(蓝色字体+下划线)

  • 权重叠加

虽然都选择了a标签,一个是类选择器+标签选择器 ,另一个是标签选择器 ,但是呈现的效果第一个选择器,是因为选择器权重的叠加(0,0,1,0) + (0,0,01) > (0,0,0,1), 请注意权重叠加不会产生进位,也就是六个标签选择器叠加也没有一个类选择器权重大,量变无法引起质变


文章作者: 木叶勇
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 木叶勇 !
 上一篇
CSS-文本属性 CSS-文本属性
CSS文本属性 可定义文本的外观,文本颜色、对齐文本、装饰文本、文本缩进、行间距等 文本颜色 可以通过color属性定义文本颜色 div { color: red; } 表示 属性值 预定义颜色 red green
2020-04-15
下一篇 
CSS-简介 CSS-简介
css简介 层叠样式表 基本语法选择器{样式} 选择器:给谁改样式 样式: 改什么样的样式 选择器:HTML的标签 样式是键值对 key:value 不同样式用;分隔 document.querySelectorAl
2020-04-15
  目录