这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
一、本堂课重点内容：
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用。本节课旨在通过对 CSS 的工作流程及原理、页面中 CSS 使用方法等详细解读，帮助前端新手建立对 CSS 的全面而深刻的认知。 在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。我将其中的不熟点记录一下。
二、详细知识点介绍：
属性选择器
- 情况一
- 写法：
[属性]{} - 作用：包含这个属性的标签，都会有以下样式
- 写法：
- 情况二
- 写法：
标签名[属性=“属性值”]{} - 作用：如果我们希望标签的属性为特殊值的时候，有特别的样式的话
- 写法：
- 情况三
- 写法：通过
^,$等正则匹配的方式 - 作用：匹配属性值为特定内容的样式
- 写法：通过
选择器的组合
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A > B | 选中B，如果它是A的子元素 | section > p |
| 兄弟选择器 | A ~ B | 选中B，如果它在A后且和A同级 | h2 ~ p |
| 相邻选择器 | A + B | 选中B，如果它是紧跟A的后面 | h2 + p |
显示继承
inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性，包括 CSS 简写 all。
对于继承属性，inherit 关键字只是增强了属性的默认行为，通常只在覆盖原有的值的时候使用。
继承始终来自文档树中的父元素，即使父元素不是包含块。
/* 设置二级标题的颜色为绿色 */
h2 { color: green; }
/* 继承 */
#sidebar h2 { color: inherit; }
Grid布局
Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。
具体属性如下 强大的grid布局
三、课后个人总结：
对于页面的布局，如网格布局，浮动等需要多加练习。
