层叠样式表的权重：css解决样式冲突，css选择器

层叠

声明冲突：同一个样式多次用到同一个元素上面
层叠：解决声明冲突的过程，浏览器自动解决（权重比较）（需了解原理，才能写好样式表）

权重比较

比较重要性：由高到低

1）作者样式表（你自己写的css）中的 ！important 样式(慎用，实际几乎不会使用，层级太高，会影响后期维护修改)
div{ color:red !important; }
2）作者样式表的普通样式（行间样式表 > 内嵌样式表 和 外联样式表；内嵌样式表和外联样式表如果选择器权重一样；谁写在下面谁优先级高）
行间样式表（卸载html元素后面的）；
内嵌样式表（写在html中的head元素内的，用包裹）；
外联样式表（单独写在外部的样式表，以.css结尾，由link引入html）；

3）浏览器中的默认样式（一般会用网络上写好的样式表初始化；normalize.css、reset.css、meyer.css）

比较特殊性：一般看来说，选择器的选的越窄，权重越高

具体规则：有一个四个数字（X X X X）的整体数字来比较优先级，那个数字大优先级就高（为了方便理解，可以暂时认为是一个四位数的数字，但是不是十进制的，粗略计算下式256进1；）
1）如果样式表是写在行间的话，第一位数字加1（1 0 0 0）
<div style='color:red;'><div>
2)样式表用了id选择器(#id)的话，第二位数字加1（0 1 0 0），可以叠加；
3）样式表用了类选择器（.class）的话第三位数字加1（0 0 1 0），可以叠加；
4)样式表用了元素选择器（div）或着伪元素选择器的话第四位数字加1（0 0 0 1），可叠加；
你叫权重，从左边开始看，如果左边第一位哪个大就展示哪个样式，如果一样的话就看第二个数字（切记不能十个进一），依此类推；如果都一样的话则谁写在下面展示谁的样式

<style>
.wrap_box div{
color:blue;
}
.wrap_box #uesr{
color:green;
}
</style>

<div class='wrap_box'>
 <div style='color:red;' class='box' id='user'>hello world<div> 
 </div>

eg：颜色为blue的权重是（0 0 1 1）
颜色为green的权重是（0 1 1 0）
颜色为red的权重是（1 0 0 0）
从左边开始比，red的权重最高，所以最终展示颜色为red

比较源次序

一句话：相同权重代码写在后面的优先级高

E+F(三个条件下一个为F的兄弟节点，如果下一个不是F的话则无法选中)

<style>
    div+p{
      background-color: pink;
    }
  </style>
<div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
  </div>

E~F(节点下面所有为F兄弟节点)

<style>
    div+p{
      background-color: pink;
    }
  </style>
<div>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
  </div>

E [attr~=‘val’] (属性包含val的节点(比如

,其中包含ab和abc))

  <style>
    p[data~='ab']{
      background-color: pink;
    }
  </style>
<div>
    <div data='ab abc'>></div>
  </div>

E [attr|=‘val’] (属性以val-开头的节点(比如

,其中包含ab和abc))

  <style>
    div[data|='ab']{
      background-color: pink;
    }
  </style>
<div>
    <div data='ab-abc'>></div> /*<div data='ab-abc ab'>这样会被选中</div>   ;<div data='ab ab-abc'>这样不会选中</div>*/
  </div>

下面三个选择器只有属性的字符串中包含即可（比如div data=‘ab-abc’> </ div>中data属性包含a，b, -, c）

E [attr^=‘val’] (属性以val开头的字符串节点)

E [attr$=‘val’] (属性以val结尾的字符串节点)

E [attr*=‘val’] (属性中有val的字符串节点)

伪类选择器(被选中元素的一种状态)

E:placeholder(选择input中的placeholder进行修改)

<style>
    input::placeholder{
      color: brown;
    }
  </style>
  <input type="text" placeholder="hello world">

E:selection(对选中的元素修改进行修改)

<style>
    p::selection{
      background-color: pink;
      color: skyblue;
    }
  </style>
<p>Lorem ipsum, dolor sit amet consectetur </p>

E:not(除了什么都选中)

<style>
	span:not(.test){}  /*  除了类名为test的span
	span:not([class]){}  /* 选中没有类名的span
	span[class]{}  /* 选中有类名的span
</style>
  <div class="box">
    <span class="test"></span>
    <span class="test"></span>
    <span></span>
  </div>

:root根标签选择器，在html中相当于选择html；如果后期出现别的根选择器，则是别的根选择器

E:target代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .

  <style>
    :root,body{
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    span{
      position: absolute;
    }
    div#box1{
      width: 100%;
      height: 100%;
      background-color: pink;
    }
    div#box2{
      width: 100%;
      height: 100%;
      background-color: skyblue;
    }
    div#box3{
      width: 100%;
      height: 100%;
      background-color:greenyellow;
    }
    div:not(:target){
      display: none;
    }
  </style>
  <a href="#box1">box1</a>
  <a href="#box2">box2</a>

  <span>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
  </span>


  <div class="test" id="box1"></div>
  <div class="test" id="box2"></div>
  <div class="test" id="box3"></div>

E:first-child第一个子元素为E的节点

E:last-child最后一个个子元素为E的节点（body节点最后一个子节点E元素无效）

E:only-child只有一个个子元素为E的节点

E：nth-last-child(n)倒数第n个子元素

  <style>
    div:first-child {
      background-color: hotpink;
    }

    div:last-child {
      background-color:lightseagreen;
    }
  </style>
  <div class="test" id="box1">1</div>
  <div class="test" id="box2">2</div>
  <div class="test" id="box3">
    <div>3</div>
    <div>4</div>
  </div>
  <div>5</div>
  //只有134会变背景颜色

E:nth-child(n)第n个子元素为E的元素（css从1开始茶查数）；这里会考虑其他元素的影响（会计算其他元素开始算）只有 < div >1< /div>受到div:nth-child(2)影响改变颜色（会受到span影响）

  <style>
    div:nth-child(1){
      background-color: maroon;
    }
    div:nth-child(2){
      background-color: maroon;
    }
  </style>
  <span>0</span>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>

E:nth-of-type(n)第n个子元素为E的元素（css从1开始茶查数）；这里不会考虑其他元素的影响；下面选的话只有 < div>1< /div> < div>2< /div>分别受到受到div:nth-nth-of-type(1) div:nth-nth-of-type(2)影响改变颜色（不会受到span影响）

  <style>
    div:nth-child(1){
      background-color: maroon;
    }
    div:nth-child(2){
      background-color: maroon;
    }
  </style>
  <span>0</span>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>

E:first-of-type；E:last-of-type；E:only-of-type;E:nth-of-type(n);E:nth-of-last-type(n)(不受别的元素影响，别的和first-child一样)

上面其中带n的元素中，n+1相当于从1后面开始都选，(-n+3)选中前3个元素；2n+1/odd为奇数，2n/even为偶数(奇偶数这里面n自然数从0开始查数)；

E:empty E元素节点中不能有节点（可以有注释，但不能有换行符和空格）

E:checked 被选中的E节点（E节点一般为单选多选框）

E:enabled 可用的E节点 E:disabled不可用的E节点（E节点一般为input输入框）

E:read-write ，修改可以写的E节点元素；E:read-only选中只读节点，即E中有readonly属性的E元素（E一般为input）

  <style>
    div:nth-of-type(n+2){
      background-color: maroon;
    }
    input:read-write{
      background-color: maroon;
      color: mediumturquoise;
    }
    input:read-only{
      background-color:pink;
      color: mediumturquoise;
    }
  </style>
  <input type="text" value="你好">
  <input type="text" readonly value="hello world">