选择器的优先级（权重）（Selector Specificity (Weight)）
由高至低排列
- ID selector --- #likethis
- Class & attribute selector --- .likethis
- Element selector --- p/div/span/...
特殊情况（其实也不特殊啦）
- 如果两条选择器的权重相同，那么浏览器会按顺序解析，自然是最下面的那一条样式会生效了。想象一下，有两个p分别写了不同的样式，前面的p是“
color:red;”，后面的p是“color:blue;”，并且这俩p在同一个样式表文件里，那么（以下是我的想象），浏览器会先渲染一个红色，然后再渲染一个蓝色，这样就把前面的覆盖了，所有呈现效果就是浏览器会选择最后面的样式进行一个渲染 - 当然也可以看vscode里面的代码提示，就是把鼠标放到响应的选择器上，等个一秒零点五秒的，会出现一个浮框，里面会有一些信息。
Selector Specificity:(0,0,1)等一下，这个是什么意思？我翻了一下其他网站、博客里面的说明，大概有些了解了。解释一下，就是选择器的type分为四种：- 行内，也就是 style=' '
- id选择器
- class选择器
- 标签名和伪类
- 行内 >= id >= class >= 标签名和伪类
- 然后ID应该是（1，0，0）中的第一位，这里面的数字代表的不是权重，而是每种类型的数量，越靠前越重要。class是（0，1，0）第二位，标签名和伪类是（0，0，1）第三位
- css的权重计算并不是十进制，大概是256什么的，这个没有细致的去了解
- 如果你想强行提升一个选择器的优先级，该怎么办？
- 在这条样式后面加个
!important这样浏览器就会无视其他所有的规则，只认准这一条。这里的！不代表否定的意思，我认为是代表一个重视或者是醒目的意思，毕竟css和编程语言有很大区别，因为它根本不是编程语言，不能用编程的思想去考虑哈。不过mdn和所有的讲师都认为不能乱用这个!important，会造成代码的混乱 - 给选择器累权重，加buff。我现在放一个id选择器，#id 这个权重目前是最高的（1，0，0），怎么整才能让另外的选择器权重高于他呢？我们假设这里面还掺和着个类 .class ，那么 .class#id 这种写法就叠加了它们二者，选择器一下子变成（1，1，0）了，比上面的多个1，说明了我们联合才能更加重要啊
- 在这条样式后面加个
继承
css中的样式是可以继承的。
被p包着的span可以继承写给p的样式。很多时候，它都享受着这种继承，因为如此，它就不用思考自己会是什么样，或，会成为什么样。它只要跟p一样就好，这样就不那么醒目、特殊，也不会出错。
可人们不这么想，span之所以是span，是因为创造者对它有别的期望，它生来注定不同，它就是为了种种特殊而存在的，如果它不特殊，那不就泯然众p了吗？
p给它继承了自身的色彩 “color:blue”，可人们对它的期望并不是它的内容也是蓝色，大家对它的期待就是它是“最初的”模样。span要怎么样才能回应大家的期待呢？最初的...原来自己一直以来都承担着许许多多的期待啊。
所以span给自己的color属性加上了 “initial” 的值，这样它就不会继承那个blue，而是一切的一切诞生时刻的样子。
所以大家学会了怎么样不去继承属性了吗？就是给它再指定一个别的值，就可以谱写自己的故事了。
也不是所有的属性都会继承的。比如边框就不会继承，不然看起来多怪。
color picker
开发中经常会用到颜色，这时候去谷歌搜索color picker就会有取色器的工具了，当然也有其他的在线取色网站，随便选。
关于颜色的写法选择有以下几种：
- rgb(255,255,255)
- rgba(255,255,255,1) 最后一位alpha代表透明度，0代表完全透明，1代表不透明，一半透明写成0.5 ，也可以简写成 .5
- 16进制写法（当然也有二进制、十进制一类的写法，但不常用）#000000 代表黑色，其他的可以用color picker搜，每两个字符代表一位rgb里面数字的16进制表示。这种写法没有透明度
- HSL(264, 73%, 76%) hue、saturation、lightness 色相、饱和度、亮度。第一位是标准色盘偏移度，是个度数，但是写的时候不要加度数符号；第二位是饱和度，百分数表示；第三位亮度，也是百分位表示。还可以加透明度，hsla()，这样写也可以。也可以不用逗号，角度用deg，如：hsl(90deg 90% 50%)
渐变
用linear-gradient()函数来制作线性的渐变色。传入两个要渐变的颜色，用rgb、hsl或者什么的随便。默认渐变是从上到下。在最前面传一个参数可以改变方向。比如 linear-gradient(to right,yellow,blue)，如果是斜着来，就可以写 to bottom right ，向由左上角到右下角渐变。也有更精确的，可以传角度，角度的话方向是顺时针，也就是上为0度，正右方是90度，依此类推。如果这么写 linear-gradient(45deg,yellow,blue)就代表着 黄色从左下角到右上角向蓝色渐变，角度代表着朝向。
linear-gradient(45deg,yellow,blue 30%)代表着蓝色从30%的地方出发，换言之也就是蓝色占整个区域的70%。
当然，也可以加入第三个颜色，或者更多。
radial-gradient(color1,color2)，可以制作一个中心是color1向四周渐变color2的渐变色。如果这样写 radial-gradient(circle,c1,c2)，就可以得到一个中心是圆形的四周发散的渐变色。你甚至可以决定这个圆形在什么地方，radial-gradient(circle at top left,c1,c2)，圆形会出现在左上角。
网站 [CSS Gradient](CSS Gradient — Generator, Maker, and Background) 可以制作出各种各样的的渐变色，还提供代码，还等什么，快去用这个。
边框 border
border:1px solid purple
这个属性由三个值组成，宽度、样式、颜色。
宽度和颜色不用多说，我们来看一下边框的样式有哪些。
- solid 实体的，也就是基本的连续线条
- dotted 点状的
- dashed 虚线
- double 双重边框
- groove 3D凹槽边框，就是中间凹两边突那种
- ridge 3D凸边框，就是脊边是方形那种
- inset 3D嵌入边框
- outset 3D突出边框，这俩边框就是那种左上右上左下右下有斜边样子的那种3d，和上面的槽边框是不一样的
border-width:1px 1px 1px 1px 可以用来设置宽度，要是只写一个参数，那就是整体的，如果写两个，就是上下和左右，要是写四个的话，就是上右下左这样的顺时针顺序，不得不说，设计者真的很爱顺时针了。
border-style: ; 其中的值就是上面的那些，当然也可以写个inherit 继承一下前面的。
border-radius: ; 来了，边框半径，经常用它来做圆角设计。如果是个正方形，那么参数给个100%就是正圆，给50%大部时候也可以得到一个正圆；
css 可以画出很多形状，可以从网上参考，搜 css shapes，也可以等我再收集学习了补充一下。
阴影
box-shadow 可以给盒子添加阴影。参数传个10px，就是向右增加个10px的阴影，如果是负数，就是向左偏移。它还有第二个值，如果接着传个 10px，就是代表阴影向正下方偏移，如果是 -10px，就是向上偏移。它的第三个值依然是个像素值，但是这是模糊度。参数中传入颜色，就可以设置阴影颜色。如果前两个值是0的话，那么只输入第三个值模糊度，就可以得到一个在盒子底下四周都有的阴影了。
tips：如果要给文字加阴影，推荐颜色的部分使用rgba设置透明度，与背景融合会更好。
隐藏元素
如果想隐藏一个元素该怎么办？可以在CSS中加入一些属性来做到这件事。
display:none;直接隐藏，消声灭迹visibility:hidden;隐藏了，但位置还在
媒体查询
媒体查询通过不同的分辨率为同一个项目写出不同的样式，也就是可以做出响应式网页，在各种设备上展现出不同的形式。
@media screen and (min-width:600px) and (max-width:1000px){
/* 满足条件的样式 */
}
可以看出媒体查询包括了几个部分。@media 是媒体查询的标志，后面紧跟的 screen 是媒体类型，还可以选中 print 之类的，and 之后（）里的内容是要满足的要求，可以写一个或多个。
\