前端那些事系列之基础篇CSS选择器(一)

前言

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