1. 选择器

/* 元素选择器 */
p {
  color: blue; /* 设置所有 <p> 元素的文本颜色为蓝色 */
}
​
/* 类选择器 */
.highlight {
  background-color: yellow; /* 设置所有类名为 "highlight" 的元素的背景颜色为黄色 */
}
​
/* ID选择器 */
#header {
  font-size: 24px; /* 设置 ID 为 "header" 的元素的字体大小为 24px */
}
​
/* 后代选择器 */
.container p {
  margin-bottom: 10px; /* 设置位于 .container 元素内部的所有 <p> 元素的下边距为 10px */
}
​
/* 子元素选择器 */
.list > li {
  font-weight: bold; /* 设置位于 .list 元素内部的所有直接子元素 <li> 的字体加粗 */
}

2. 盒模型

/* width */
.box {
  width: 200px; /* 设置 .box 元素的宽度为 200px */
}
​
/* height */
.box {
  height: 150px; /* 设置 .box 元素的高度为 150px */
}
​
/* margin */
.box {
  margin: 10px; /* 设置 .box 元素的外边距为 10px（四个方向均相等） */
}
​
/* padding */
.box {
  padding: 20px; /* 设置 .box 元素的内边距为 20px（四个方向均相等） */
}
​
/* border */
.box {
  border: 1px solid #CCC; /* 设置 .box 元素的边框为 1px 的实线边框，颜色为 #CCC */
}

3. 文本样式

/* color */
h1 {
  color: red; /* 设置所有 <h1> 元素的文本颜色为红色 */
}
​
/* font-size */
p {
  font-size: 16px; /* 设置所有 <p> 元素的字体大小为 16px */
}
​
/* font-weight */
strong {
  font-weight: bold; /* 设置所有 <strong> 元素的字体加粗 */
}
​
/* text-align */
.container {
  text-align: center; /* 设置 .container 元素内部的文本水平居中对齐 */
}
​
/* text-decoration */
a {
  text-decoration: underline; /* 给所有 <a> 元素的文本添加下划线 */
}

4. 背景样式

/* background-color */
.box {
  background-color: #F0F0F0; /* 设置 .box 元素的背景颜色为 #F0F0F0 */
}
​
/* background-image */
.box {
  background-image: url('image.jpg'); /* 设置 .box 元素的背景图片为 image.jpg */
}
​
/* background-repeat */
.box {
  background-repeat: no-repeat; /* 设置 .box 元素的背景图片不重复显示 */
}
​
/* background-position */
.box {
  background-position: center; /* 设置 .box 元素的背景图片居中对齐 */
}
​
/* background-size */
.box {
  background-size: cover; /* 设置 .box 元素的背景图片自适应尺寸，覆盖整个元素 */
}

5. 定位样式

/* 相对定位 */
.box {
  position: relative; /* 设置 .box 元素为相对定位 */
  top: 20px; /* 相对于原始位置向下移动 20px */
  left: 30px; /* 相对于原始位置向右移动 30px */
}
​
/* 绝对定位 */
.box {
  position: absolute; /* 设置 .box 元素为绝对定位 */
  top: 50px; /* 相对于父元素顶部向下偏移 50px */
  left: 100px; /* 相对于父元素左侧向右偏移 100px */
}
​
/* 固定定位 */
.box {
  position: fixed; /* 设置 .box 元素为固定定位 */
  top: 0; /* 相对于视口顶部固定在 0px 的位置 */
  right: 0; /* 相对于视口右侧固定在 0px 的位置 */
}
​
/* 粘性定位 */
.box {
  position: sticky; /* 设置 .box 元素为粘性定位 */
  top: 20px; /* 相对于父元素顶部向下偏移 20px */
}
​
/* 浮动 */
.box {
  float: left; /* 设置 .box 元素向左浮动 */
}
​
/* 弹性定位 */
.container {
  display: flex; /* 设置 .container 元素为弹性容器 */
  justify-content: center; /* 水平居中对齐弹性子元素 */
  align-items: center; /* 垂直居中对齐弹性子元素 */
}

5. 伪类样式

1. 链接伪类（Link Pseudo-classes）
* `:link`: 选择未被访问过的链接。
* `:visited`: 选择已被访问过的链接。
* `:hover`: 鼠标悬停在元素上时的状态。
* `:active`: 鼠标点击按下时的状态。
* `:focus`: 元素获取焦点时的状态。
​
a:link {
  /* 未访问链接样式 */
}
​
a:visited {
  /* 已访问链接样式 */
}
​
a:hover {
  /* 鼠标悬停链接样式 */
}
​
a:active {
  /* 鼠标点击链接样式 */
}
​
input:focus {
  /* 元素获取焦点样式 */
}
​
​
2. 结构伪类（Structural Pseudo-classes）
​
* `:first-child`: 选择元素的第一个子元素。
* `:last-child`: 选择元素的最后一个子元素。
* `:nth-child(n)`: 选择元素的第 n 个子元素。
* `:nth-last-child(n)`: 选择元素的倒数第 n 个子元素。
* `:only-child`: 选择没有兄弟元素的元素。
​
li:first-child {
  /* 列表第一个子元素样式 */
}
​
div:last-child {
  /* 最后一个子元素样式 */
}
​
p:nth-child(3) {
  /* 第三个子元素样式 */
}
​
p:nth-last-child(2) {
  /* 倒数第二个子元素样式 */
}
​
span:only-child {
  /* 唯一子元素样式 */
}
​
3. 用户界面状态伪类（UI Element State Pseudo-classes）
​
* `:checked`: 选择被选中的元素，如复选框或单选按钮。
* `:disabled`: 选择禁用的元素。
* `:enabled`: 选择启用的元素。
* `:focus`: 选择获取焦点的元素。
* `:required`: 选择要求必填的元素。
​
input:checked {
  /* 选中状态样式 */
}
​
input:disabled {
  /* 禁用状态样式 */
}
​
input:enabled {
  /* 启用状态样式 */
}
​
input:focus {
  /* 元素获取焦点样式 */
}
​
input:required {
  /* 必填元素样式 */
}
​
​
4. UI元素结构伪类（UI Element Structural Pseudo-classes）
​
* `:first-of-type`: 选择父元素下相同类型的元素中的第一个元素。
* `:last-of-type`: 选择父元素下相同类型的元素中的最后一个元素。
* `:nth-of-type(n)`: 选择父元素下相同类型的元素中的第 n 个元素。
* `:nth-last-of-type(n)`: 选择父元素下相同类型的元素中的倒数第 n 个元素。
* `:only-of-type`: 选择父元素下只有一个该类型的元素。
​
p:first-of-type {
  /* 父元素下第一个段落样式 */
}
​
div:last-of-type {
  /* 父元素下最后一个 div 样式 */
}
​
span:nth-of-type(2) {
  /* 父元素下第二个 span 样式 */
}
​
span:nth-last-of-type(3) {
  /* 父元素下倒数第三个 span 样式 */
}
​
div:only-of-type {
  /* 父元素下唯一的 div 样式 */
}
​
5. 目标伪类（Target Pseudo-classes）
​
* `:target`: 选择当前活动的目标元素。
​
#section1:target {
  /* 当前活动的目标元素样式 */
}
​
6. 状态伪类（State Pseudo-classes）
​
* `:checked`: 选择已选中的元素。
* `:default`: 选择默认被选中的元素。
* `:disabled`: 选择禁用的元素。
* `:enabled`: 选择启用的元素。
* `:indeterminate`: 选择未确定状态的元素。
​
input:checked {
  /* 已选中的元素样式 */
}
​
input:default {
  /* 默认被选中的元素样式 */
}
​
input:disabled {
  /* 禁用的元素样式 */
}
​
input:enabled {
  /* 启用的元素样式 */
}
​
input:indeterminate {
  /* 未确定状态的元素样式 */
}

6. 伪元素样式

1. ::before 伪元素
​
* `::before`: 在元素内容之前插入生成的内容。
​
.box::before {
  /* 伪元素样式 */
  content: "前置内容"; /* 在 .box 元素之前插入内容 */
  display: block; /* 将伪元素设置为块级元素 */
  background-color: gray; /* 设置伪元素的背景颜色为灰色 */
}
​
​
2. ::after 伪元素
​
* `::after`: 在元素内容之后插入生成的内容。
​
.box::after {
  /* 伪元素样式 */
  content: "后置内容"; /* 在 .box 元素之后插入内容 */
  display: block; /* 将伪元素设置为块级元素 */
  background-color: gray; /* 设置伪元素的背景颜色为灰色 */
}
​
3. ::first-letter 伪元素
​
* `::first-letter`: 选择元素的第一个字母或第一个字。
​
p::first-letter {
  /* 首字母样式 */
  font-size: 24px; /* 设置段落的第一个字母的字体大小为 24px */
  color: blue; /* 设置段落的第一个字母的文本颜色为蓝色 */
}
​
4. ::first-line 伪元素
​
* `::first-line`: 选择元素的第一行。
​
p::first-line {
  /* 首行样式 */
  font-weight: bold; /* 设置段落的第一行文本加粗 */
}