前言
发现之前对于CSS的知识点记录的比较少，最新在重新复习CSS，所以在此对以前没有记录的知识点做一下记录。
一、选择器的权重
我们之前曾经讲过，当出现不同选择器对同个元素同个css属性进行不同的配置，那么最终显示的优先级会是id选择器 > 类选择器 > 元素（标签）选择器。这种说法虽然没有错，但还是不够准确。实际上当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级)决定
<head>
<meta charset="UTF-8">
<title>选择器的权重</title>
<style>
div{
width: 300px;
height: 300px;
background-color: tomato;
}
#root{
background-color: teal;
}
.box1{
background-color: blue;
}
</style>
</head>
<body>
<div id="root" class="box1"></div>
</body>
id选择器优先级较高
既然选择器有权重，那么不同的选择器各自的权重分别是多少呢？
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1,0,0,0 |
| id选择器 | 0,1,0,0 |
| 类和伪类选择器 | 0,0,1,0 |
| 元素选择器 | 0,0,0,1 |
| 通配选择器 | 0,0,0,0 |
| 继承的样式 | 没有优先级 |
实际上，对于权重的划分，CSS是采用四位数字来进行比较的，位数越靠前的数字，说明权重越大，同时即使多个同位的数字相加，也无法进位，权重永远比高权重的选择器低。
我们可以看一下下面这个例子：
<head>
<meta charset="UTF-8">
<title>选择器的权重</title>
<style>
div{
width: 300px;
height: 300px;
background-color: tomato;
}
#root{
background-color: teal;
}
.box1,.box2,.box3{
background-color: blue;
}
.box2{
font-size: 30px;
}
.box3{
color:violet;
}
</style>
</head>
<body>
<div id="root" class="box1 box2 box3">TEST</div>
</body>
可以看到，即使.box1,.box2,.box3三者相加的权重为0,0,3,0,，也无法和id选择器0,1,0,0比较。
image.png
同时，即使ID选择器权重很高，但如果我们在内联样式中设置background-color为其他颜色，也还是以内联样式为主。而在同级别的选择器比较中，权重的作用可能更为明显：
<head>
<meta charset="UTF-8">
<title>选择器的权重</title>
<style>
div{
width: 300px;
height: 300px;
background-color: tomato;
}
.box2{
background-color: teal;
}
.box1,.box3{
background-color: blue;
}
</style>
</head>
<body>
<div id="root" class="box1 box2 box3"></div>
</body>
`.box1 .box3`权重值为2，比`.box2`权重值要高
最后来做一个小总结：
（1）比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的),
（2）选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
（3）如果优先级计算后相同，此时则优先使用靠下的样式
（4）如果想要强制在选择器中把其权重调为最高，可以使用!important关键字（但一般尽量少用）
<head>
<meta charset="UTF-8">
<title>选择器的权重</title>
<style>
div{
width: 300px;
height: 300px;
background-color: tomato !important;
}
#root{
background-color: teal;
}
.box1,.box2,.box3{
background-color: blue;
}
.box2{
font-size: 30px;
}
.box3{
color:violet;
}
</style>
</head>
<body>
<div id="root" class="box1 box2 box3">TEST</div>
</body>
使用!import关键字进行权重提升
（二）样式中的长度单位
（1）像素：px
我们的屏幕(显示器)实际上是由一个一个的小点点（像素）构成的，不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样。也就是说，我们可以使用像素作为元素的长度单位来进行表示，但不同的清晰度显示屏对于同个元素可能最终呈现出来的效果不同。
div{
font-size: 10px;
}
（2）百分比
我们可以将属性值设置为相对于其父元素属性的百分比-设置百分比可以使子元素跟随父元素的改变而改变
<head>
<meta charset="UTF-8">
<title>Css的长度单位</title>
<style>
#root{
width: 200px;
height: 100px;
background-color: skyblue;
}
#child{
width: 50%;
height: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="root">
<div id="child"></div>
</div>
</body>
百分比演示用例
（3）em
em是相对于元素的字体大小来计算的：1 em = 1 font-size
em会根据字体大小的改变而改变
<head>
<meta charset="UTF-8">
<title>Css的长度单位</title>
<style>
#root{
width: 200px;
height: 100px;
background-color: skyblue;
}
/* 字体默认为16px，如果没有单独配置的话，下面的width等价于160px */
#child{
width: 10em;
height: 5em;
background-color: red;
}
</style>
</head>
<body>
<div id="root">
<div id="child"></div>
</div>
</body>
em演示用例
（4）rem
- rem是相对于根元素的字体大小来计算，下面这个案例混用了
rem和em，需要注意。
<head>
<meta charset="UTF-8">
<title>Css的长度单位</title>
<style>
body{
font-size: 12px;
}
#root{
width: 200px;
height: 100px;
background-color: skyblue;
}
/* 字体默认为16px，如果没有单独配置的话，下面的width等价于160px */
#child{
font-size: 10px;
width: 20em;
height: 5rem;
background-color: red;
}
</style>
</head>
<body>
<div id="root">
<div id="child"></div>
</div>
</body>
rem演示用例
（三）CSS的颜色单位
（1）直接颜色描述
对于简单的颜色设置，我们可以直接用red、orange、purple来进行颜色的设置
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style>
#root{
width: 200px;
height: 200px;
background-color:red
}
</style>
</head>
<body>
<div id="root"></div>
</body>
image.png
（2）RGB值
直接使用单词进行颜色描述固然十分的方便，但有时候项目中页面元素需要用到的颜色并不一定可以用常规的颜色来描述，此时更加合适使用RGB值来对颜色进行描述。
RGB分别表示R（Red）、G（Green）、B（Blue）的光学三颜色
- 每一种颜色的范围在0- 255 (0% -100%)之间
- 语法:rbg(红色,绿色,蓝色)
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style>
#root{
width: 200px;
height: 200px;
background-color:rgb(255, 0, 0)
}
</style>
</head>
<body>
<div id="root"></div>
</body>
这里需要注意，由于这里的三原色中只有红色有值，所以最终的结果自然是红色。在实际开发中，我们一般还是会直接使用取色器这类的小工具去获取所需颜色的RGB值，而不会自己手动去写。
RGB使用示例
（3）RGBA
RGBA其实和RGB的使用是基本一样的，唯一的区别在于RGBA相比于后者来说多了一个透明度的选项，透明度的取值范围是0-1，其中0表示完全透明，1表示完全不透明。
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style>
#root{
width: 200px;
height: 200px;
background-color:rgba(255, 0, 0,0.5)
}
</style>
</head>
<body>
<div id="root"></div>
</body>
我们可以看到，由于透明度的原因，原本的红色变淡了。
RGBA演示用例
需要注意的是，RGB和RGBA其实除了用常规的0-255的数字进行描述之外，还有16进制的写法：
另外，如果是存在同个色系两位数字相同时，比如#ff0000的话，可以简写成#f00
<head>
<meta charset="UTF-8">
<title>颜色单位</title>
<style>
#root{
width: 200px;
height: 200px;
background-color:#ff0000
}
</style>
</head>
<body>
<div id="root"></div>
</body>
RGB16进制写法演示
网友评论