选择器权重/层叠/继承

css权重：

css权重：样式的优先级，有两条或多条样式作用于一个元素，就是同样的样式比较，具体采取谁，那个元素优先就由权重决定，比如多条样式比较，权重高的那条样式对元素才起作用，权重相同的，后写的样式会覆盖前面写的样式，我们可以叫他“后来居上”。

权重需要计算

权重计算(层叠)：
声明冲突 ：同一个样式，多次用到同一个元素，声明就是给他一个属性，
除了浏览器默认的样式和自己写的样式有冲突
例如：a标签，有默认的样式，自己又写的样式，就造成了声明冲突，重复的样式，只保留一个。像这样，浏览器遇到声明冲突了，它就要去解决冲突，有的时候还要专门写成声明冲突
例如：一排导航，只有一个选中，就要给其中一个加样式，去覆盖之前的样式， 浏览器遇到重复样式怎么去处理的，如何去覆盖 就是 层叠的过程（权重计算）。
层叠：浏览器解决声明冲突（重复样式）的过程，浏览器会自动处理重复样式过程，权重计算过程

• 选择器的权重：
  1，!important Infinity(正无穷大)
  2，行间样式 1000
  3，id 100
  4，class | 属性 | 伪类 10
  5，标签选择器 伪元素 1
  6，通配符 0

• 权重计算：
  通过选择器权重，计算出4位数，数值越大权重越高, 计算过程不是十进制，是256进制
  千位：内联样式， 记1，否则记0
  百位：选择器中所有id的数量，记1，否则记0
  十位：class，属性，伪类， 记1，否则记0
  各位：元素（标签），伪元素 ， 记1，否则记0

同一排的选择器，权重相加是它的权重,权重相同，代码书写靠后的胜出

    /*0102*/
    #only div a{ color:red;}
    /*0002*/
    div a{ color:green;}
    /*0102*/
    #only a::after{ content: "*"; color:purple;}
    /*0201*/
    #only #only2 a{ color: orange;}
      /*0022*/
    .box div a:hover{ color:blue;}
    /*0012*/
    .box div a{ color:#ccc;}

  <div id="only" class="box">
     <div id="only2">
        <a href="#">我是a标签</a>
     </div>
  </div>

  .box a{
      color: #999;
  }
  div.box a{
      color: red;
  }
  div a{
    color: blueviolet;
  }
  a{
    color: green;
  }
  <p class="box">
      <a href="#">算我吧</a>
  </p>
 

css重置样式表

覆盖浏览器默认样式
很多浏览器默认样式是不同的，为了让其显示一样，要覆盖默认样式

项目中都是先引入一个覆盖浏览器样式的css 公共的样式
再引入自己写的样式
网上有很多重置样式表：normalize.css,reset.css,meyer.css
这几个文件没有什么大的区别，有细微差别，手动改一下就行了

继承：子元素会继承父元素的某些属性

通常子元素或者子孙元素会继承父元素或者祖父元素的某些css属性
并不是所有的属性都会被继承：通常和文字相关的属性都可以被继承，查看mdn官网
背景色不会被继承，不设置的背景色是透明的

查看控制台样式继承：
浏览器控制台inherited form body | div.box
此样式继承自body，div.box

 div{
     color: red;
     text-align:center;
  }
 <div>
       <p>1000</p> 
       <span>2000</span>
  </div>

• 真实项目中，我们一般把字体类型，字体大写在body中，其他所有的元素都继承body的字体，不用再一个个的设置了

 div{
     color: red;
  }
 <div>
       <a href="#">算我吧</a>
       <p>1000</p> 
  </div>

属性值的计算过程

页面渲染的过程的细节
浏览器渲染每个元素的前提条件：该元素的所有css属性必须有值

一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
一个元素的所有的css属性都要有值才行，浏览器才会知道如何去渲染这个元素
少一个都不行，就算我们什么都没有写，浏览器也会去计算这个元素的css属性
再计算body的属性，再计算body中元素的属性…都计算完成后才会去渲染

控制台 Elements ->Computed 选中Show all 会显示当前元素的所有css属性

从无属性值到每个属性都有值的计算过程
怎么来计算呢？有4个步骤：
1，确定声明值 声明值
参考样式表中没有冲突的声明，直接拿出来作为css属性值，第2步以后就不再就进行了
user agent stylesheet的样式属于声明的属性值

2，层叠冲突，对样式表有冲突的使用层叠规则（权重计算）

3，使用继承 对仍然没有值的熟悉，若可以继承，则继承父元素的值

到了这里，能继承的去继承父元素属性，层叠冲突也解决了，声明的值也有了
但是还有一些属性没有值，怎么办呢？

4，使用默认值 对仍没有值的属性，使用默认值（浏览器的默认值）
每个属性都有自己的默认值，例如：背景色默认是透明色，一个p标签没有设置宽高，但也有宽高的默认值

经过了4个步骤为止，所有的属性值都确定好了, 浏览器才会去渲染

特殊的两个css取值：
1，inherit：手动（继承）继承，将父元素的值取出来应用到该元素
2，initial：使用浏览器默认值，浏览器给的什么值，就显示什么值
例如背景色是透明色，设置了div背景色是红的，其中一个想要用透明色，就可以直接使用默认值
background: initial; 使用的是浏览器默认的透明色