CSS 概述

/* 浏览器从右向左匹配 */
.container .nav .item a { color: red; }
/* 匹配顺序：a → .item → .nav → .container */

用户代理 !important > 用户 !important > 作者 !important
> 作者正常样式 > 用户正常样式 > 用户代理正常样式

/* 计算示例 */
div p { }              /* (0, 0, 0, 2) */
.nav .item a { }       /* (0, 0, 3, 1) */
#sidebar .link { }     /* (0, 1, 1, 0) */
#main #content p { }   /* (0, 2, 0, 1) */

// 注册自定义属性，使其可被动画化
CSS.registerProperty({
  name: '--gradient-start',
  syntax: '<color>',
  inherits: false,
  initialValue: '#3498db'
});
 
CSS.registerProperty({
  name: '--gradient-end',
  syntax: '<color>',
  inherits: false,
  initialValue: '#2ecc71'
});

/* 注册后，自定义属性可以被 transition/animation 平滑过渡 */
.box {
  --gradient-start: #3498db;
  --gradient-end: #2ecc71;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  transition: --gradient-start 0.5s, --gradient-end 0.5s;
}
 
.box:hover {
  --gradient-start: #e74c3c;
  --gradient-end: #f39c12;
}

// checkerboard-painter.js
class CheckerboardPainter {
  static get inputProperties() {
    return ['--checker-size', '--checker-color-a', '--checker-color-b'];
  }
 
  paint(ctx, size, properties) {
    const sizeVal = parseInt(properties.get('--checker-size')) || 32;
    const colorA = properties.get('--checker-color-a').toString().trim() || '#fff';
    const colorB = properties.get('--checker-color-b').toString().trim() || '#000';
 
    const cols = Math.ceil(size.width / sizeVal);
    const rows = Math.ceil(size.height / sizeVal);
 
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        ctx.fillStyle = (x + y) % 2 === 0 ? colorA : colorB;
        ctx.fillRect(x * sizeVal, y * sizeVal, sizeVal, sizeVal);
      }
    }
  }
}
 
registerPaint('checkerboard', CheckerboardPainter);

<!-- 在 HTML 中注册 Worklet -->
<script>
  CSS.paintWorklet.addModule('checkerboard-painter.js');
</script>

.element {
  --checker-size: 20px;
  --checker-color-a: #f0f0f0;
  --checker-color-b: #cccccc;
  background: paint(checkerboard);
}

/* Button.module.css */
.button {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}
 
.primary {
  background-color: var(--primary-color, #3498db);
  color: white;
}
 
.primary:hover {
  background-color: var(--primary-color-hover, #2980b9);
}
 
.danger {
  background-color: #e74c3c;
  color: white;
}
 
.danger:hover {
  background-color: #c0392b;
}

// Button.jsx
import styles from './Button.module.css';
 
function Button({ variant = 'primary', children, ...props }) {
  return (
    <button
      className={`${styles.button} ${styles[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

// Button.jsx
import styled, { css } from 'styled-components';
 
const variantStyles = {
  primary: css`
    background-color: #3498db;
    &:hover { background-color: #2980b9; }
  `,
  danger: css`
    background-color: #e74c3c;
    &:hover { background-color: #c0392b; }
  `,
};
 
const StyledButton = styled.button`
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
 
  ${props => variantStyles[props.variant || 'primary']}
 
  ${props => props.fullWidth && css`
    width: 100%;
  `}
`;
 
function Button({ variant = 'primary', fullWidth, children, ...props }) {
  return (
    <StyledButton variant={variant} fullWidth={fullWidth} {...props}>
      {children}
    </StyledButton>
  );
}

/* ========== 规则集结构 ========== */
选择器 {
  属性名: 属性值;
  属性名: 属性值;
}
 
/* ========== 单个规则集 ========== */
h1 {
  color: blue;          /* 声明1：设置文字颜色 */
  font-size: 24px;      /* 声明2：设置字体大小 */
}
 
/* ========== 多个选择器共享样式（分组选择器） ========== */
h1, h2, h3 {
  font-weight: bold;    /* 所有标题加粗 */
  margin-bottom: 10px;  /* 底部间距 */
}
 
/* ========== 后代选择器 ========== */
.article .title {
  font-size: 20px;
  color: #333;
}
 
/* ========== 语法规则说明 ========== */
/* 1. 属性名不区分大小写（推荐小写） */
/* 2. 属性值区分大小写（部分情况，如颜色名不区分） */
/* 3. 每个声明以分号结尾，最后一个分号可省略（不推荐） */
/* 4. 声明块中的空格和换行不影响解析 */
 
/* ========== 多值属性 ========== */
.example {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  /* 字体回退列表：优先使用微软雅黑，不支持则用 Arial，再不支持则用系统无衬线字体 */
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS 引入方式示例</title>
 
  <!-- ===== 方式1：内部样式表 ===== -->
  <!-- 适合首屏关键 CSS 或单页面应用 -->
  <style>
    body { font-family: Arial, sans-serif; }
    .container { width: 100%; max-width: 1200px; }
  </style>
 
  <!-- ===== 方式2：外部样式表 ✅ 推荐 ===== -->
  <!-- 可缓存、可复用、结构与表现分离 -->
  <link rel="stylesheet" href="styles.css" />
 
  <!-- 指定媒体类型（打印样式不阻塞屏幕渲染） -->
  <link rel="stylesheet" href="print.css" media="print" />
 
  <!-- 响应式设计 -->
  <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)" />
 
  <!-- ===== 方式3：预加载非关键 CSS ===== -->
  <link rel="preload" href="non-critical.css" as="style"
        onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>
<body>
  <!-- ===== 方式4：行内样式 ===== -->
  <!-- 优先级最高，但不推荐大量使用 -->
  <p style="color: red; font-size: 16px;">文本内容</p>
</body>
</html>

/* @import 在 CSS 文件中使用 */
/* ⚠️ 串行加载，性能差，仅用于 CSS 模块化或字体导入 */
@import url("base.css");
@import url("components/buttons.css");
 
/* 指定媒体查询 */
@import url("print.css") print;
 
/* 字体导入 */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>关键渲染路径优化</title>
 
  <!-- ✅ 首屏关键 CSS 内联（避免阻塞渲染） -->
  <style>
    /* 仅包含首屏渲染必需的样式 */
    .header { height: 60px; background: #fff; border-bottom: 1px solid #eee; }
    .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
    .hero h1 { font-size: 48px; color: #333; }
  </style>
 
  <!-- ✅ 非关键 CSS 异步加载 -->
  <link rel="preload" href="styles.css" as="style"
        onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <header class="header">
    <nav>导航栏</nav>
  </header>
  <main class="hero">
    <h1>首屏内容优先渲染</h1>
  </main>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
  <meta charset="UTF-8">
  <title>CSS 变量主题切换</title>
  <style>
    /* ========== 定义全局变量（亮色主题） ========== */
    :root {
      --primary-color: #3498db;
      --primary-color-hover: #2980b9;
      --bg-color: #ffffff;
      --text-color: #333333;
      --text-color-secondary: #666666;
      --border-color: #e0e0e0;
      --card-bg: #f9f9f9;
      --spacing: 16px;
      --border-radius: 8px;
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s ease;
    }
 
    /* ========== 暗色主题变量覆盖 ========== */
    [data-theme="dark"] {
      --primary-color: #5dade2;
      --primary-color-hover: #3498db;
      --bg-color: #1a1a2e;
      --text-color: #e0e0e0;
      --text-color-secondary: #aaaaaa;
      --border-color: #333355;
      --card-bg: #16213e;
      --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
 
    /* ========== 使用变量 ========== */
    * { margin: 0; padding: 0; box-sizing: border-box; }
 
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      transition: var(--transition);
      line-height: 1.6;
    }
 
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: var(--spacing);
    }
 
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      padding: calc(var(--spacing) * 1.5);
      margin-bottom: var(--spacing);
      box-shadow: var(--shadow);
      transition: var(--transition);
    }
 
    .card h2 {
      color: var(--primary-color);
      margin-bottom: calc(var(--spacing) / 2);
    }
 
    .card p {
      color: var(--text-color-secondary);
    }
 
    .btn {
      display: inline-block;
      padding: calc(var(--spacing) * 0.5) var(--spacing);
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: calc(var(--border-radius) / 2);
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
    }
 
    .btn:hover {
      background-color: var(--primary-color-hover);
      transform: translateY(-1px);
    }
 
    .theme-toggle {
      position: fixed;
      top: var(--spacing);
      right: var(--spacing);
    }
  </style>
</head>
<body>
  <button class="btn theme-toggle" onclick="toggleTheme()">切换主题</button>
 
  <div class="container">
    <div class="card">
      <h2>CSS 变量主题切换</h2>
      <p>通过 CSS 自定义属性和 <code>data-theme</code> 属性选择器，实现亮色/暗色主题的无缝切换。所有颜色、间距、阴影都通过 CSS 变量控制，切换主题只需修改一个属性。</p>
    </div>
    <div class="card">
      <h2>优势</h2>
      <p>无需 JavaScript 操作 DOM 样式，无需加载多份 CSS 文件，无需预处理器。纯 CSS 实现，性能最优。</p>
    </div>
  </div>
 
  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const currentTheme = html.getAttribute('data-theme');
      html.setAttribute('data-theme', currentTheme === 'light' ? 'dark' : 'light');
    }
  </script>
</body>
</html>

/* ✅ 推荐：使用有意义的语义化类名 */
.nav-menu { }
.btn-primary { }
.article-title { }
 
/* ❌ 避免：无意义的展性命名 */
.red { }
.div1 { }
.style1 { }
.big-text { }

.element {
  /* 1. 定位 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
 
  /* 2. 盒模型 */
  display: flex;
  width: 100px;
  padding: 10px;
  margin: 10px;
 
  /* 3. 排版 */
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
 
  /* 4. 视觉效果 */
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
 
  /* 5. 动画与其他 */
  transition: all 0.3s;
}

/* ❌ 不推荐：选择器层级过深，权重过高，难以覆盖 */
.header .nav .menu .item .link { }
/* 权重: 0,0,5,0 */
 
/* ✅ 推荐：扁平化选择器，使用 BEM 命名 */
.nav-link { }
/* 权重: 0,0,1,0 */

/* ✅ 使用 transform 代替 top/left（不触发重排） */
.element {
  transform: translateX(100px);  /* 只触发合成，GPU 加速 */
}
 
/* ✅ 使用 opacity 代替 visibility（只触发重绘/合成） */
.element {
  opacity: 0;  /* 可被 GPU 加速 */
}
 
/* ❌ 避免触发重排 */
.element {
  top: 100px;   /* 触发重排 + 重绘 */
  width: 200px; /* 触发重排 + 重绘 */
}

/* 提前告知浏览器元素将发生变化，优化渲染管线 */
.animated-element {
  will-change: transform, opacity;
}
 
/* ⚠️ 注意：不要滥用 will-change，只在动画即将发生时添加 */
/* 动画结束后移除 */

/* ✅ 推荐：使用简写 */
.element {
  margin: 10px 20px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fff url('bg.png') no-repeat center/cover;
}
 
/* ⚠️ 注意：简写属性会重置未指定的子属性 */
/* 如果只想覆盖部分属性，使用长写形式 */

/* ========== 定义全局变量 ========== */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing: 16px;
  --border-radius: 4px;
  --font-family: "Microsoft YaHei", sans-serif;
}
 
/* ========== 使用变量 ========== */
.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
  border-radius: var(--border-radius);
}
 
/* ========== 带默认值（变量不存在时使用） ========== */
.text {
  color: var(--text-color, #333);
}
 
/* ========== 局部变量覆盖（实现主题切换） ========== */
.card {
  --primary-color: red;  /* 只在该组件内覆盖 */
  background: var(--primary-color);  /* red */
}
 
/* ========== 响应式变量 ========== */
:root {
  --container-width: 100%;
}
 
@media (min-width: 768px) {
  :root { --container-width: 750px; }
}
 
@media (min-width: 1200px) {
  :root { --container-width: 1140px; }
}
 
.container {
  width: var(--container-width);
  margin: 0 auto;
}

styles/
├── base/               # 基础样式（全局重置、排版）
│   ├── reset.css       # 样式重置
│   ├── variables.css   # CSS 变量定义
│   └── typography.css  # 字体排版
├── components/         # 组件样式（可复用）
│   ├── buttons.css
│   ├── forms.css
│   └── cards.css
├── layout/             # 布局样式（页面骨架）
│   ├── header.css
│   ├── footer.css
│   └── grid.css
├── pages/              # 页面特定样式
│   ├── home.css
│   └── about.css
├── utils/              # 工具类（原子类）
│   ├── helpers.css
│   └── animations.css
└── main.css            # 主入口文件（按顺序导入）

/* BEM 命名示例 */
.card { }                    /* 块 Block */
.card__header { }            /* 元素 Element */
.card__title { }             /* 元素 Element */
.card--featured { }          /* 修饰符 Modifier */
.card__title--large { }      /* 元素 + 修饰符 */

/* ✅ 使用特性检测 */
@supports (display: grid) {
  .container { display: grid; }
}
 
/* ✅ 渐进增强（先写回退方案，再写现代方案） */
.container {
  display: flex;    /* 回退方案 */
  display: grid;    /* 现代浏览器覆盖 */
}
 
/* ✅ 使用 @layer 管理优先级 */
@layer base, components, utilities;
 
@layer base {
  body { font-family: system-ui, sans-serif; }
}
 
@layer components {
  .btn { padding: 8px 16px; border-radius: 4px; }
}
 
@layer utilities {
  .text-center { text-align: center; }
  .hidden { display: none; }
}
 
/* ✅ 使用 PostCSS + Autoprefixer 自动添加厂商前缀 */
/* 源码 */
.box { transition: all 0.3s; }
/* 编译后 */
.box { -webkit-transition: all 0.3s; transition: all 0.3s; }

<!-- 解决方案1：强制刷新 -->
<!-- Mac: Cmd + Shift + R / Windows: Ctrl + Shift + R -->
 
<!-- 解决方案2：添加版本号（生产环境推荐） -->
<link rel="stylesheet" href="styles.css?v=1.0.1" />
 
<!-- 解决方案3：使用构建工具自动添加 hash -->
<link rel="stylesheet" href="styles.a3f2b1c.css" />

/* 技巧1：使用边框可视化调试布局 */
* { outline: 1px solid red !important; }
/* 或使用 DevTools 的 Outline 功能 */
 
/* 技巧2：检查元素是否被隐藏 */
/* 逐一排查以下属性 */
.element {
  display: none;        /* 不渲染 */
  visibility: hidden;   /* 渲染但不可见，占位 */
  opacity: 0;           /* 透明，仍可交互 */
  height: 0;            /* 高度为0 */
  overflow: hidden;     /* 溢出隐藏 */
  z-index: -1;          /* 被其他元素遮挡 */
}
 
/* 技巧3：使用 DevTools 的 Computed 面板查看计算后样式 */
/* 技巧4：使用 DevTools 的 Layers 面板查看层叠上下文 */

<head>
  <!-- 后加载的样式会覆盖先加载的（同优先级时） -->
  <link rel="stylesheet" href="base.css" />      <!-- 先加载 -->
  <link rel="stylesheet" href="override.css" />   <!-- 后加载，优先级更高 -->
</head>

/* 方案1：使用更具体的选择器 */
.page .section .title { }
 
/* 方案2：使用 BEM 命名规范（推荐） */
.card__title { }
 
/* 方案3：使用 CSS Modules（构建工具自动生成唯一类名） */
/* 方案4：使用 CSS-in-JS（React/Vue 生态） */
/* 方案5：使用 @layer 管理优先级层级 */
@layer base, components, utilities;

/* ====================
   区块注释 — 用于分隔大模块
   ==================== */
 
/* 头部导航 */
.header {
  height: 60px;
  background: #fff;
}
 
/* TODO: 添加响应式适配 */
.sidebar {
  width: 250px;
}
 
/* HACK: 修复特定浏览器兼容性问题 */
.container {
  display: flex;
}
 
/* FIXME: 需要优化动画性能 */
.modal {
  animation: fadeIn 0.3s;
}

.example {
  /* rem: 相对于根元素（html）的 font-size */
  font-size: 1.5rem;    /* = 1.5 × 16px（默认） = 24px */
 
  /* em: 相对于父元素的 font-size（或自身 font-size 的倍数） */
  padding: 1em;         /* = 1 × 24px = 24px（继承父元素的 font-size） */
 
  /* vw: 视口宽度的 1% */
  width: 50vw;          /* = 视口宽度 × 50% */
 
  /* vh: 视口高度的 1% */
  height: 100vh;        /* = 视口高度 × 100% */
 
  /* dvh: 动态视口高度（解决移动端地址栏问题） */
  height: 100dvh;       /* 推荐在移动端使用 */
}

/* z-index 只在定位元素（position 不为 static）上生效 */
.broken {
  z-index: 9999;        /* ❌ 不生效，因为 position 默认为 static */
}
 
.fixed {
  position: relative;   /* ✅ 或 absolute / fixed / sticky */
  z-index: 9999;        /* ✅ 现在生效了 */
}
 
/* 另外，z-index 会创建新的层叠上下文 */
/* 子元素的 z-index 只在父元素的层叠上下文内比较 */
.parent-a {
  position: relative;
  z-index: 1;           /* 创建层叠上下文 */
}
.parent-a .child {
  z-index: 9999;        /* 仍然在 parent-a 的上下文内，无法超越 parent-b */
}
.parent-b {
  position: relative;
  z-index: 2;           /* 高于 parent-a，所以 parent-b 的所有子元素都在 parent-a 之上 */
}