CSS三大特性——层叠性、继承性和优先级（权重的叠加）

港控/mmm° 2022-11-20 08:17 217阅读 0赞

# CSS三大特性 #

### 层叠性 ###

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则：

样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式。

样式不冲突，不会层叠。

例如

div{
    	color: red;
    	font-size: 20px;
    }
    dic {
    	color: pink;
    }

在页面中会显示20像素粉色的文字，后面粉色会覆盖红色，但是前面文字大小并不会被覆盖。

### 继承性 ###

CSS中子标签会继承父标签的某些样式。（主要继承与文字有关的样式）

适当使用继承可以简化代码。

body {
    	font: 12px/1.5 'Microsoft yahei' ;
    }
    
    div {
    	font-size: 14px;
    }

div字体大小覆盖了body字体的大小，行高1.5倍，是当前字体大小的1.5倍，所以此时行高为21px；

行高设置1.5倍的优势就是可以根据自己文字的大小调整行高。

### 优先级 ###

当同一个元素指定多个选择器，就会有优先级的产生。

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

选择器不同，则根据选择器权重。

选择器权重表

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>选择器权重</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>继承或者*</td> 
   <td>0,0,0,0</td> 
  </tr> 
  <tr> 
   <td>元素选择器</td> 
   <td>0,0,0,1</td> 
  </tr> 
  <tr> 
   <td>类选择器，伪类选择器</td> 
   <td>0,0,1,0</td> 
  </tr> 
  <tr> 
   <td>ID选择器</td> 
   <td>0,1,0,0</td> 
  </tr> 
  <tr> 
   <td>行内样式style=""</td> 
   <td>1,0,0,0</td> 
  </tr> 
  <tr> 
   <td>!important重要的</td> 
   <td>∞ 无穷大</td> 
  </tr> 
 </tbody> 
</table>

div{
    	color: blue!important;
    }

无论其他选择器位置如何，div里面文字颜色为蓝色。

权重由四组数字组成，永远不会有进位，比较时从左往右比较，如果某一位一样，就比较下一位。

继承权重为0，只要是继承过来的，权重都为0 。

a链接，浏览器默认指定了样式，蓝色有下划线，因此a继承过来的样式，a不会改变。

如果是复合选择器，则会有权重叠加，需要计算权重。

ul li {
    	color: green;
    }
    li {
    	color: red;
    }

此时，li中的文字颜色会变成绿色。ul li 的权重为0,0,0,1+0,0,0,1，而li的权重为0,0,0,1，因此ul li的权重更高。

权重会叠加，但是不会有进位。

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS三大特性（层叠性、继承性、优先级）重点介绍权重

CSS三大特性（层叠性、继承性、优先级）重点介绍权重 * CSS三大特性 * * 1. 层叠性 * 2. 继承性（子承父业） * ...

「爱情、让人受尽委屈。」/ 2024年04月18日 09:24/ 0 赞/ 76 阅读

相关 css权重(css权重优先级)

什么是权重，权数？在数学方面，表示某个数据出现的频率、次数叫权重或者权数。 ![css权重(css权重优先级)\_css权重(css权重优先级)][css_css_c

待我称王封你为后i/ 2023年09月26日 13:16/ 0 赞/ 25 阅读

相关 CSS-三大特性，CSS层叠性、CSS继承性和CSS优先级，权重的计算，!important 的用法详解

CSS 层叠性所谓层叠性是指多种CSS样式的叠加，当一个元素设置了多个相同的样式属性，一个属性就会覆盖另外一个属性这是浏览器处理冲突的一种能力，如果一个元

向右看齐/ 2023年08月17日 17:44/ 0 赞/ 145 阅读

相关浅谈CSS的三大特性(继承性，层叠性，优先级)

一、继承性当给父元素设置一些属性时其子元素也可以继承该特性称为继承性注意点： 1、并非所有的属性都可以继承只有以color/font/text/lin

￡神魔★判官ぃ/ 2023年07月12日 08:49/ 0 赞/ 17 阅读

相关 CSS三大特性——层叠性、继承性和优先级（权重的叠加）

CSS三大特性层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循就近原则，

港控/mmm°/ 2022年11月20日 08:17/ 0 赞/ 218 阅读

相关 CSS三大特性(层叠性、继承性、优先级)

CSS有三个非常重要的三个特性: 层叠性、继承性、优先级。 1 层叠性相同选择器给设置相同的样式。此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突

川长思鸟来/ 2022年11月17日 15:58/ 0 赞/ 194 阅读

相关 CSS的三大特性（层叠性、继承性、优先级）

@[TOC](CSS的三大特性) CSS层叠性 CSS层叠性：当给相同的选择器设定相同的样式（比如都设置`color`），这时会引发样式冲突，层叠性的出现解决了

太过爱你忘了你带给我的痛/ 2022年10月22日 07:48/ 0 赞/ 25 阅读

相关【CSS】CSS之层叠性，继承性，优先级

层叠性样式发生冲突的时候，总是执行后边的样式，和调用顺序无关。继承性文字的所有属性都可以被继承 \-特殊：h1-h6 文字大小不能被继承 a标签文字颜色

本是古典何须时尚/ 2022年10月02日 14:50/ 0 赞/ 254 阅读

相关 CSS:权重和层叠规则决定了其优先级

来源：[http://www.ido321.com/1063.html][http_www.ido321.com_1063.html] 首先，给大家看一篇关于CSS

深碍√TFBOYSˉ_/ 2022年08月13日 11:42/ 0 赞/ 214 阅读

相关 CSS三大特性——继承、优先级、和层叠。

继承：即子类元素继承父元素的样式。优先级：是指不同类别样式的权重比较。层叠：是说当数量相同时，通过层叠（后者覆盖前者）的样式。 CSS优先级排序：！importan

桃扇骨/ 2022年05月11日 00:22/ 0 赞/ 292 阅读