本章用来探讨并且尝试一些 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.