这是我参加"第四届青训营"笔记创作活动的第2天
属性选择器
写过这么多css代码，仿佛很少遇到需要用属性选择器的，我对于属性选择器的记忆还是停留在简简单单的 [属性名]{样式}。但其实，属性选择器远远比我想象的复杂。下面就来浅谈一下属性选择器吧。
对属性值做匹配
代码实例
//表示href属性以#开头的a标签
a[href^="#"] {
color: #efefef
}
//表示href属性以$结尾的a标签
a[href$=".jpg"] {
color: #efefef
}
伪类选择器
状态伪类
例如： :focus :hover :visited等等
结构伪类
根据在DOM节点出现的位置来决定是否选择这个元素
例如：:first-child :last-child等等
组合
相邻选择器 A+B 选中B如果它紧跟在A后面
兄弟选择器 A~B 选中B如果它在A后且与A同级
line-height行高
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
|---|---|
| initial | 将属性值显式重置为初始值。 |
盒模型
CSS盒模型详解（图文教程） - 千古壹号 - 博客园 (cnblogs.com)
弹性布局
超级实用！！！ Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
Grid布局
超级实用！！！CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
