112.前端css优先级

本章用来探讨并且尝试一些 css 那些选择符号。

时光飞逝，毕业已经两年。在前端这个领域，也断断续续地学了四年，感觉自己还不如一个踏踏实实地学了一年的前端。

在此，也提出一些这些年的感想。

1、不要因为觉得学了就会忘记，就不去学习。

有基础、无基础的重新学习，总是不一样的。有轮廓的时候，对一件事物有大概的轮廓，是很重要的。
2、犹豫是很浪费时间的。

CSS优先级的普世规则和类别权重

普世规则：

1、后来居上。（同种权限后面在css代码层面上，后面写的的权重更大）
2、important最大。（如果是配置了 important，则配置了 important 的权限最大）

如果大家都是 important，则继续比较类别权重。

类别权重：

1、内联样式（就是写在 style 里面）style="height:100px;之类的
2、id选择器（在HTML文档中，id必须保持唯一） <div id="hh"></div>

这里经过深究发现：写多个相同的id——虽然语法上这样没错，但因为 JS 获取的一般是第一个。为了规范，还是只写一个好！！
3、类选择器/属性选择器[type="text"]/伪类选择器::hover的数目
4、标签名p{}

注1：类别权重无视 DOM 树节点的远近。html .green = body .green
注2：还有一些不计入权重的：*/+/>/not()
注3：:not()虽然本身不计算权重，但是括号里面的类是记录权重的。

类别权重的表格形式如下：
以下优先级表示方式用 [number, number, number, number] 表示，越前面的数字表示优先级越大，并且不存在进位
（据说曾经是存在的，现在bug修掉了应该是/或者提升了出现成本。）

类别	权重
内联样式	[1, 0, 0, 0]
id选择器	[0, 1, 0, 0]
类选择器	[0, 0, 1, 0]
标签名	[0, 0, 0, 1]

以及一张非常形象的图，感觉这张图帮助很大！

练习——理论知识是真的难懂，这边来介绍几道实战题目

1、后来居上

  <div class="red green common">
    I'm text.
  </div>

  .red {
    color: red;
  }
  .green {
    color: #089e8a;
  }

因为 green 写在后面，所以最后展示绿色：

2、类别权重大的取胜
html如第一题；

  .red {
    color: red;
  }
  div {
    color: #089e8a;
  }

.red优先级为(类选择器为倒数第二) [0, 0, 1, 0]
div优先级为(元素选择器为倒数第一) [0, 0, 0, 1]
所以最后显示红色：

3、类别权重相同，则比较数量（注意，这里将类名写两遍是有作用的！！！）
html如第一题；

  .red.red {
    color: red;
  }
  .green {
    color: #089e8a;
  }

.red.red优先级为 [0, 0, 2, 0]
.green优先级为 [0, 0, 1, 0]
所以最后展示红色：

4、important 的强制性(但是如果大家都是 important，那么最后胜出的会是优先级最高的 important)

<style>
  .red {
    color: red !important;
  }
  div {
    color: #089e8a !important;
  }
</style>
</head>
<body>
  <div class="red green" style="color: blue !important;">
    I'm text.
  </div>
</body>

最后显示的是内联样式里面的 blue，因为大家都是 important，则向下继续比较优先级。
大方向还是一样的，符合常理，没毛病！
显示如下：

5、关于*的通配符

*通配符是优先级最小的东西，连元素选择器(例如p{} body{}) 都能覆盖掉它

参考文章

知乎-CSS权重
 挺好的CSS优先级讲解
 一个我觉得也很不错的博文

这里来说一下题外话，是关于 vue 中常用的 /deep/ 的

1.它是作用是什么？

对于在 Vue 项目中，使用了类似 ElementUI/MintUI 等css框架——如果你想要改变组件的样式；

一、如果项目文件不使用 scoped（私有化样式）——> 则可能造成全局样式污染。A和B程序员使用了相同的样式名造成污染。

二、如果使用了 scoped，则无法修改 Element/MintUI 等UI框架的样式。

scope的原理（诞生原因：解决全局样式污染）
- 1.给html中dom节点加一个不重复的data属性（形如 data-v-19fca230）来表示唯一性
- 2.在每句 css 后面加一个当前组件的data属性选择器——实现私有化样式
- 3.如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性
2.它的原理是什么？

举个例子：
```
/deep/ .el-input__inner {
  color: #089e8a;
}
```
会被转化成
```
[data-v-039c5b43] .el-input__inner {
    color: #089e8a;
}
```
这是 vue-loader 给我们提供的便利功能（与Chrome的/deep/不同）。

原本因为 scoped，父组件的样式、类名等，无法穿透到子组件；使用了 /deep/ 后，父组件的类名可以穿透到子组件中了（这也意味着我们能够通过类名改变我们所想要的样式了）。

complete.