1.介绍

在刚开始学习前端的时候，写样式时总是时不时的会遇到样式失效，可能操作了一些什么就有可以显示。这些现象可能都是css优先级的问题

2.我们先大致列举一下css的权重

1、 !import 规则的权重最大
2、行内样式，权重会加1000
2、id选择器，权重会加100
4、类选择器、属性选择器、伪类选择器，权重会加10
5、标签选择器，权重会加1

1、对于相同的样式属性 组合起来权值大的优先，如果权重一样，那么会根据先后顺序，后面的覆盖前面的
2、对于不同的样式属性不管权重、先后顺序 总是会合并在一起 (也就是相当于多了一个样式)

1. 那我们通过代码实例来简单演示一下单个的选择器
<style>
   /* 1、首先看看他们单独的权重 */
  div{
    width: 100px;
    height: 100px;
    background-color: red; //红色背景
   }
  </style>
 <body>
  <div class="a" id="a">
  </div>
 </body>

效果：

前端添加权重_前端添加权重

1)接下来添加一个类选择器写在下面
div{
    width: 100px;
    height: 100px;
    background-color: red!important;
   }
.a{
   background-color: green;
  }

效果：

前端添加权重_前端添加权重_02

2)再加一个id选择器的样式
div{
    width: 100px;
    height: 100px;
    background-color: red;
   }
   .a{
    background-color: green;
   }
   #a{
    background-color: blue;
   }

效果：

前端添加权重_css_03

3)其他不变，再加一个行内样式
<div style="background-color:yellow" class="a" id="a">  
</div>

效果：

前端添加权重_前端添加权重_04

4)其他不变给div标签选择器下的背景颜色加上!import
div{
    width: 100px;
    height: 100px;
    background-color: red!important;
 }

效果又变为红色

前端添加权重_权重_05

2.接下来看看组合的选择器的权重 理解一下权重时可以叠加的
html结构不变  
   .a{
    width: 100px;
    height: 100px;
    background-color: green;
   }
   .a{ 
    background-color: red;
   }
1)此时两个权重都为10，权重相同时，后面的覆盖前面的相同属性，此时：

前端添加权重_选择器_06

2)但是如果给上面的加一个标签选择器那么权重将变为11
/* 权重变为11 */
   div.a{
    width: 100px;
    height: 100px;
    background-color: green;
   }
   /* 权重为10 */
   .a{ 
    background-color: red;
   }

此时

前端添加权重_选择器_07

3.对于样式属性不同时就不考虑权重，就是单纯的增加样式
#a{
    width: 100px;
    height: 100px;
    background-color: red;
   }
   .a{
    border-radius: 20px;
   }

效果为

前端添加权重_权重_08

  • 如有错误 请及时指出 及时修改 避免误导同学 谢谢大家