这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
今天学习的内容是CSS，不过在两个多小时能讲的还是还是有限的。 从我学习前端以来就还没有仔细思考过，所以就借助笔记活动来学习一下。
选择器
分类
- 通配选择器 *{ } -----所有的 html 元素
- id选择器 #cav -----id为 cav 的元素
- 类选择器 .w -----类名包含 w 的元素
- 标签选择器 div -----所有 div 元素
- 标签属性选择器
- 伪类和伪元素选择器 常用的伪类：:hover,:active,:focus,:nth-child() 常用的伪元素：::before,::after
对标签属性选择器特别说明下
-
[href] -----选择带有 href 属性的所有元素
-
a[href="example.com"] -----选择带有 href="example.com" 属性的所有a元素
-
[href~="baidu"]
-
[href|="baidu"]
-
[href^="baidu"]
-
[href$="baidu"]
-
[href*="baidu"]
组合
- 乘积，几个连起来写（li.ipt.active:选出了所有既含有ipt又有active的li元素）
- 子代选择，用>隔开（.box>p:选择出与.box是直接父子关系的p标签）
- 后代选择器，用空格隔开 （.box p:选择出.box包含的所有的p标签）
- 后面相邻兄弟，用+隔开（.box+p：选出与.box同级别，并且在.box后面的第一个p标签）
- 后续所有兄弟，用
隔开（.boxp：选出与.box同级别，并且在.box后面的所有p标签）
权重
大体：!important > 内联样式 > id > 类 > 标签 > 继承
常用CSS函数
-
var() var()中可以使用我们自定义的的函数变量
我在全局样式里定义了一个 --font-size-large:36px;我就可以在要使用36px的地方改为var(--font-size-large),方便统一管理
-
calc() 我们就可以不用写确定的值了。比如
width:calc(100% - 100px) -
rgb(r,g,b) 使用红-绿-蓝模型（RGB）定义颜色。
rgb(0,0,0)就是纯黑，rgb(255,255,255)就是纯白色
-
rgba(r,g,b,a) 使用红-绿-蓝-阿尔法模型（RGB）定义颜色。
前三个参数与rgb()一样，第四个参数为透明度（范围是0-1，0是全透明，1是完全不透明），rgba(0,0,0,.5)就是半透明黑色
-
linear-gradient() 线性渐变色（用法挺多的）。使用 CSS 渐变 - CSS（层叠样式表） | MDN (mozilla.org)
