文章目录

• 一、继承权重
• • 1、继承权重示例
  • 2、继承权重+标签选择器权重示例
  • 3、继承权重+标签选择器权重+类选择器示例

一、继承权重

在下面的 基础选择器 权重 中 , 继承父标签样式 的 权重为 0,0,0,0 ;

1、继承权重示例

在下面的结构中 ,

	
CSS 继承权重测试

设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;

完整代码 :

 

     

CSS 继承权重测试

展示效果 :

2、继承权重+标签选择器权重示例

在下面的结构中 ,

	
CSS 继承权重测试

设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;

由于是继承标签样式 , 该样式 作用于 p 标签的权重为 0,0,0,0 ;

与此同时 设置 p 标签为蓝色 ; 该样式 的 权重为 0,0,0,1 ;

p 标签选择器 的权重 0,0,0,1 , 大于 div 标签继承的样式权重 0,0,0,0 , 最终显示的文本为蓝色 ;

完整代码 :

 

     

CSS 继承权重测试

效果展示 :

3、继承权重+标签选择器权重+类选择器示例

如果在上面的基础上 , 为 div 标签设置 class 属性 , 为该 class 属性设置颜色值 紫色 ;

类选择器 的权重为 0,0,1,0 ; 这个权重比较高 ;

虽然 类选择器 权重高 , 但是所有选择器 的字标签 继承的权重 , 都为 0,0,0,0 ,

因此该选择器样式的设置 , 影响不到 类选择器 下 的 已经使用 标签选择器 设置 的 p 标签的属性 ;

代码示例 :

 

     

CSS 继承权重测试

展示效果 :