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

向右看齐 2023-08-17 17:44 145阅读 0赞

## CSS 层叠性 ##

*  所谓层叠性是指多种CSS样式的叠加，当一个元素设置了多个相同的样式属性，一个属性就会覆盖另外一个属性
 *  这是浏览器处理冲突的一种能力，如果一个元素通过多个相同选择器设置了相同的样式属性，那么这个时候一个属性就会将另一个属性层叠掉（覆盖掉）
 *  层叠性主要遵循的是**就近原则**，在不考虑优先级的情况下，在多个样式属性中最终生效的样式是离标签最近的
 *  只要样式不冲突就不会进行层叠；当一个元素被多个相同的选择器选中，并且设置了不同的样式属性，这些样式属性就会叠加合并一起作用到被选中的元素上

示例：

/* 都通过 类选择器选择了 div 元素 */
    .box { 
      color: red;
      background-color: skyblue;
    }
    
    .test { 
      /* 这里的 color 样式属性会覆盖上面的 color 属性 */
      color: yellow;
      /* 不同的样式属性会进行叠加 */
      border: 2px dotted gray;
    }

![在这里插入图片描述][20191002124813200.png]

## CSS 继承性 ##

*  所谓的继承性是指当子元素没有设置样式时，会继承父元素的一些样式
 *  子元素可以继承父元素的样式有 **text-，font-，line- 开头的样式属性，以及color属性可以继承**
 *  合理地使用继承可以简化代码，降低CSS样式的复杂性；比如有很多子级标签都需要某个样式，可以给父级指定这个样式，这些子级继承过来即可

示例：

.box { 
      width: 200px;
      height: 100px;
      color: blue;
      font-size: 20px;
      text-align: center;
      line-height: 100px;
      background: pink;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

## CSS 优先级 ##

#### CSS优先级 ####

*  单个选择器的优先级:
    
     *  行内样式 > id选择器 > class选择器 > 标签选择器
 *  多个选择器的优先级:
    
     *  多个选择器的优先级，一般情况下，指向越准确，优先级越高。

#### 计算权重 ####

特殊情况下，我们需要"假设"一些值：

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">优先级</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">标签选择器</td> 
   <td align="center">优先级为1</td> 
  </tr> 
  <tr> 
   <td align="center">类选择器</td> 
   <td align="center">优先级为10</td> 
  </tr> 
  <tr> 
   <td align="center">Id选择器</td> 
   <td align="center">优先级为100</td> 
  </tr> 
  <tr> 
   <td align="center">行内样式</td> 
   <td align="center">优先级为1000</td> 
  </tr> 
  <tr> 
   <td align="center">!import</td> 
   <td align="center">∞ 无穷大</td> 
  </tr> 
 </tbody> 
</table>

*  当选择器，选择上了某个元素的时候，那么要这么统计权重：
    
     *  计算 id的数量，类的数量，标签的数量，最终谁优先级越高用谁的样式
     *  如果权重（优先级）一样，那么以后出现的为准
        
        **注意：** 不进位，实际上能进位（255个标签，等于1个类名）但是没有实战意义！
 *  如果大家都是0（没有选中某个元素、都是继承上去的）：
    
     *  就近原则 谁描述的近用谁的
     *  如果一样近，比权重，权重不同，谁大用谁的
     *  权重相同，谁写在后面用谁的
 *  简单示例：
    
    同一个标签，携带了多个类名：
    
        <p class="spec1 spec2">我是什么颜色？</p>
        <p class="spec2 spec1">我是什么颜色？</p>
    
    和在标签中的类名的顺序无关，只和 css 选择器的顺序有关：
    
        .spec2{ 
            color:blue;
        }
        
        .spec1{ 
            color:red;
        }
    
    红色的；因为 css 选择器中 .spec1 写在后面

#### !important 标记 ####

*  important 语法：
    
     *  `Key:Value !important;` Key 为css属性名，Value 为对应的属性值
     *  用来给一个属性提高权重；这个属性的权重就是无穷大
     *  一定要注意语法：
        
        **正确的：**
        
        `font-size:60px !important;`
        
        **注：** 不能将 `!important` 写在语句的外面，感叹号不能省略
 *  !important 需要强调3点：
    
     *  !important 提升的是一个属性，而不是一个选择器
        
        CSS:
        
            p{ 
                color:red !important;  /* → 只写了这一个!important，所以就字体颜色属性提升权重*/
                font-size: 100px ;     /* → 这条属性没有写!important，所以没有提升权重*/
            }
            #para1{ 
                color:blue;
                font-size: 50px;
            }
            .spec{ 
                color:green;
                font-size: 20px;
            }
        
        HTML:
        
            <p class="spec" id="para1">我是p标签</p>
        
        所以，综合来看，字体颜色是red（听 important的）；字号是50px（听id的）。
     *  !important无法提升继承的权重，该是0还是0
        
        比如HTML结构：
        
            <div>
                <p>哈哈哈哈哈哈哈哈</p>
            </div>
        
        CSS样式：
        
            div{ 
            	color:red !important;
            }
            p{ 
            	color:green;
            }
        
        由于div是通过继承性来影响文字颜色的，所以 !important 无法提升它的权重，权重依然是0。干不过p标签，因为p标签是实实在在选中了，所以字是绿色的（以p为准）
     *  !important 不影响就近原则
        
        如果大家都是继承来的，按理说应该按照“就近原则”，那么 important 能否影响就近原则呢？
        
         *  影响是不可能影响的，这辈子都不可能影响的；远的，永远是远的；不能给远的写一个 important，干掉近的
            
            在开发网站的时候，不建议使用 !important ；因为会让 css 写的很乱

[20191002124813200.png]: /images/20230808/c64c9381645446dd8cc23fb8e5ddd812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230808/56879cf9db8d495fa6ad139fd7137d55.png