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

太过爱你忘了你带给我的痛 2022-10-22 07:48 8阅读 0赞

@[TOC](CSS的三大特性)

# CSS层叠性 #

CSS层叠性：当给相同的选择器设定相同的样式（比如都设置`color`），这时会引发样式冲突，层叠性的出现解决了这一样式冲突的问题，后面的样式会重叠（覆盖）前面的样式

# CSS继承性 #

CSS继承性(inherited form)：子标签会继承父标签的某些样式,主要是跟文字相关的样式(`text-`、`font-`、`line-`以及`color`)，简单理解就是：子承父业

# CSS优先级 #

CSS优先级：当同一个元素被多个选择器选中，就需要考虑优先级的大小进行样式设定，这里可以用选择器权重值总和来区分

*  当选择器相同，按照**层叠性**设定样式
 *  当选择器不同，按照选择器**权重值的大小总和**设定样式

#### 各个选择器的权重值 ####

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>权重值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>继承和*</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>元素选择器</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>类选择器(.)</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td>ID选择器(#)</td> 
   <td>100</td> 
  </tr> 
  <tr> 
   <td>行内样式(style="")</td> 
   <td>1000</td> 
  </tr> 
  <tr> 
   <td>!important</td> 
   <td>无穷大</td> 
  </tr> 
 </tbody> 
</table>

示例：

div div p { 
    	color: red;
    }
    /*权重值总和为1+1+1*/
    #demo2 { 
    	color: green;
    }
    /*权重值总和为1000*/
    div .demo1 { 
    	color: blue;
    }
    /*权重值总和为1+100*/
    #box1 { 
    	color: yellow;
    }
    /*权重值总和为0，因为#box1是父元素，直接继承*/

<div>
    	<div id="box1">
    		<p class="demo1" id="demo2">这是一个自然段</p>
    	</div>
    </div>

综上`<p>`中文字的颜色是蓝色（权重值最大）