前言
18年开始做前端开发,有一些知识的积累但总觉得东一块西一块,所以想做个前端那些事系列,把自己对于前端体系的一些了解按阶分类、按点提取的整理出来,目前先打算整理出来一个基础篇。第一章嘛,就从css开始好了
CSS简介
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。如果HTML可以理解为一棵树的结构,那么css就是给这棵树加上配饰、色彩,为树做一些修饰。
CSS特性
选择器
基础选择器
- 标签选择器(a、span)
- ID选择器(id=“a”)
- 类选择器(class=“a”)
层级选择器
- parent child 后代选择器,元素的后代元素
- parent>child 子代选择器,元素的子代元素
- parent+child 相邻同胞选择器
- child1,child2 并集选择器
- child1.child2 交集选择器
条件选择器
- :has 包含指定的元素 (div:has(span))指有包含span的div
- :not 非指定条件的元素
- :where 指定条件的元素
状态选择器
- :active 伪类匹配被用户激活的元素
- :hover 悬浮
- :link 向未访问的链接添加特殊的样式
- :visited 访问过的a标签
- :focus 选择具有焦点的元素
结构选择器
- :root 文档的根元素
- :empty 无子元素的元素
- :nth-child(n) 指定顺序索引的元素 odd奇数/even偶数
- :first-child 首元素
- :last-child 末尾元素
- :only-child 仅有该元素的元素
伪元素
- ::before 在元素前面加入
- ::after 在元素后面加入
- ::first-letter 首字母
- ::first-line 首行
- ::backdrop 全屏模式的元素
- ::placeholder