CSS级联样式（基础知识）备忘录

🔹一、基础选择器（Basic Selectors）

语法	名称	示例	说明
*	通配选择器	* {margin: 0;}	选择所有元素
element	标签选择器	p {color: red;}	选择所有 <p> 标签
.class	类选择器	.btn {color: blue;}	选择所有 class="btn" 的元素
#id	ID选择器	#header {font-size: 20px;}	选择 id="header" 的元素
element.class	标签+类选择器	button.primary {background: green;}	指定类的指定元素

---

🔹二、组合选择器（Combination Selectors）

语法	名称	示例	说明
A B	后代选择器	div p {}	选择 div 内所有 p
A > B	子元素选择器	ul > li {}	只选择直接子元素
A + B	相邻兄弟选择器	h2 + p {}	选择紧挨着的 p
A ~ B	通用兄弟选择器	h2 ~ p {}	所有在 h2 后面的 p

---

🔹三、伪类选择器（Pseudo-classes）

语法	名称	示例	说明
:hover	鼠标悬停	a:hover {}	鼠标悬停时样式
:active	激活	button:active {}	鼠标点击时样式
:focus	获得焦点	input:focus {}	输入框被点击时
:first-child	第一个子元素	li:first-child {}	选择父元素的第一个子元素
:last-child	最后一个子元素	li:last-child {}	同理，最后一个
:nth-child(n)	第n个子元素	li:nth-child(2) {}	选择第2个子元素
:not(X)	非X的元素	div:not(.active) {}	排除某些元素

---

🔹四、伪元素选择器（Pseudo-elements）

语法	名称	示例	说明
::before	内容前	h1::before {content: "*";}	添加内容前缀
::after	内容后	h1::after {content: ".";}	添加内容后缀
::first-letter	首字母	p::first-letter {font-size: 200%;}	放大首字母
::first-line	首行	p::first-line {}	首行样式
::selection	选中文本	::selection {background: yellow;}	文本被选中时

---

🔹五、属性选择器（Attribute Selectors）

语法	名称	示例	说明
[attr]	有该属性	[disabled] {}	有 disabled 属性的元素
[attr=value]	属性值等于	[type="text"] {}	属性值为 text 的 input
[attr^=value]	属性值开头	[href^="https"] {}	开头是 https 的链接
[attr$=value]	属性值结尾	[src$=".jpg"] {}	后缀为 .jpg 的图片
[attr*=value]	属性值包含	[title*="提示"] {}	含有"提示"二字的 title

---

🔹六、层叠与优先级规则（Cascading & Specificity）

类型	示例	优先级（高 → 低）
内联样式	<div style="">	1000
ID选择器	#id	0100
类、伪类、属性选择器	.class, :hover, [type="text"]	0010
标签选择器、伪元素	div, ::after	0001
通配符或继承	*, body div	0000

⚠️ 多个规则冲突时，以优先级高的为准，若优先级一样，则后写的覆盖前写的。

---

🔹七、重要性控制

语法	名称	示例	优先级
!important	强制优先	color: red !important;	最大（慎用）

---