基本语法结构

组成部分	说明	示例
选择器	用于选中要样式的元素	p, .class, #id
声明块	包含一个或多个样式声明	{ color: red; font-size: 16px; }
属性:值	具体的样式规则	color: blue;
注释	用于解释代码，不被执行	/* 这是一个注释 */
引入方式	内联/内部/外部样式表	<style>, <link rel="stylesheet">

基础选择器

选择器	语法	说明
元素选择器	p { }	选中所有指定元素
类选择器	.classname { }	选中所有class="classname"的元素
ID选择器	#idname { }	选中id="idname"的元素（唯一）
通配符选择器	* { }	选中所有元素
属性选择器	[attr], [attr="value"]	选中具有指定属性的元素

复合选择器

选择器	语法	说明	示例
后代选择器	空格	选中所有后代元素	.container p - container内所有p
子元素选择器	>	仅选中直接子元素	.container > p - container的直接子元素p
相邻兄弟	+	选中紧随其后的兄弟元素	h2 + p - h2后面紧跟的p
后续兄弟	~	选中后面所有兄弟元素	h2 ~ p - h2后面所有p
交集选择器	无空格	同时满足多个条件	p.highlight - p且class="highlight"

伪类选择器

伪类	说明	示例
:link	未访问的链接	a:link
:visited	已访问的链接	a:visited
:hover	鼠标悬停状态	button:hover
:active	激活状态（点击中）	button:active
:focus	获得焦点状态	input:focus
:first-child	作为第一个子元素	p:first-child
:last-child	作为最后一个子元素	li:last-child
:nth-child(n)	第n个子元素	li:nth-child(2n) - 偶数项
:not(selector)	否定选择器	p:not(.highlight)

伪元素

伪元素	说明	使用场景
::before	在元素内容前插入虚拟元素	图标、装饰性内容
::after	在元素内容后插入虚拟元素	清除浮动、装饰
::first-line	元素第一行文本	首行特殊样式
::first-letter	元素第一个字母	首字母大写（drop cap）
::selection	用户选中的文本	自定义选中样式
::placeholder	输入框占位文本	自定义placeholder样式