这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
在这之前，我也学过CSS，但在视频中还是有些我从未听闻的知识点，在此记录一些我印象不深或认为较为重要的点。
课堂笔记
CSS选择器
属性选择器
<style>
a {
text-decoration: none;
}
a[href^="#"] {
color: red;
}
a[href$=".jpg"] {
color: green;
}
</style>
<a href="#10086">一一一</a>
<a href="10086.jpg">二二二</a>
href^="#":用来匹配以#开头的href属性值
href$=".jpg":用来匹配以.jpg结尾的href属性值
伪类选择器
状态性 对于处于某种状态的标签给予样式
例如：
a:active 匹配被点击的链接
input:checked 匹配处于选中状态的input元素
结构性 根据元素在父亲节点中的相对位置给予样式
例如：
li:first-child 匹配父元素中的第一个子元素li
p:nth-child(n) 匹配父元素中的第n个子元素p
组合选择器
CSS选择器优先级
优先级：id选择器>类（伪类）选择器>标签选择器
简单理解：标签选择器的权重为1，类（伪类）选择器的权重为10，id选择器的权重为100，相加得CSS选择器的总权重，选择器权重越高，越优先显示。
CSS继承
在CSS中，某些属性会自动继承其父元素的计算值，除非显式指定一个值。
显式继承
* { box-sizing: inherit; }
html { box-sizing: border-box; }
.some-widget { box-sizing: content-box; }
初始值
在CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字显式重置为初始值
- background-color:initial
CSS求值过程
原图地址：cdpn.io/webzhao/deb…
注
计算值：能根据CSS中的属性值计算出来的值，如浏览器默认 ‘font-size’ 是 ‘16px’，所以 ‘1em’ 计算值应该是 ‘16px’。
使用值：无法HTML和CSS计算出来的值，如设置body的宽度为60%，只有在窗口的大小确定下来以后才能计算得出body的宽度。
CSS布局
CSS布局这块理解得还不够深入，要多结合MDN文档学习
