今天在整理博客样式时，发现自己经常混淆各种CSS选择器的用法。特别是在处理主题切换、响应式设计和浏览器兼容性时，总是要反复查阅资料。于是决定把今天学到的这些CSS知识点整理成手册，方便日后快速查阅。这份文档记录了我对CSS选择器、媒体查询、变量系统等概念的理解，希望能成为前端开发中的实用工具书。

目录

  • 基础选择器
  • 伪类和伪元素
  • 属性选择器
  • 媒体查询
  • CSS 变量与主题
  • 浏览器特定样式
  • 常用样式模式
  • 优先级与特殊语法

基础选择器

元素选择器

1
2
3
4
img {
    max-height: 450px;
    width: auto;
}

作用：选择所有img元素

类选择器

1
2
3
.style-two {
    /* 样式 */
}

作用：选择所有 class=”style-two” 的元素

ID 选择器

1
2
3
#post {
    /* 样式 */
}

作用：选择 id=”post” 的元素

组合选择器

后代选择器

1
2
3
#post img {
    /* 样式 */
}

作用：选择 #post 内部的所有 元素

子元素选择器

1
2
3
.post-content > hr {
    /* 样式 */
}

作用：选择 .post-content 的直接子

元素

并列选择器

1
2
3
td, th {
    /* 样式 */
}

作用：同时选择 和 元素

伪类和伪元素

伪元素 (双冒号 ::)

伪元素会创建真实的视觉元素，在页面中渲染出来

::before 和 ::after

1
2
3
4
5
6
7
8
footer#footer::before {
    content: "前缀";
    color: red;
}
footer#footer::after {
    content: "后缀";
    color: blue;
}

作用：在元素内容的前面/后面插入虚拟元素

::-webkit-scrollbar

1
2
3
4
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

作用：自定义 Webkit 浏览器的滚动条样式

伪类 (单冒号 :)

伪类选择元素的特定状态，不创建新元素

:root

1
2
3
:root {
    --font-color: #333;
}

作用：选择文档根元素（HTML），用于定义 CSS 变量

:not() 否定伪类

1
2
3
td:not([class="code"]), th {
    max-width: 820px;
}

作用：选择 class 不是 “code” 的 元素

状态伪类

1
2
3
4
button:hover { background: yellow; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
input:checked { accent-color: green; }

作用：选择元素的交互状态和结构位置

属性选择器

数据属性选择器

1
2
3
[data-theme='dark'] {
    --font-color: #ffffffb3;
}

作用：选择具有 data-theme=”dark” 属性的元素

类属性选择器

1
2
3
[class="code"] {
    /* 样式 */
}

作用：精确匹配 class 属性值

媒体查询

触摸设备检测

1
2
3
4
5
6
7
@media (hover: none) and (pointer: coarse) {
    .table-wrap {
        word-break: keep-all;
        white-space: nowrap;
        overflow: auto;
    }
}

条件解析：

  • (hover: none) - 不支持悬停
  • (pointer: coarse) - 指针设备精度粗糙（触摸屏）
    目标设备：智能手机、平板电脑等触摸设备

CSS 变量与主题

定义 CSS 变量

1
2
3
4
5
:root {
    --font-color: #333;
    --text-highlight-color: #1f1f21;
    --blockquote-color: #333;
}

使用 CSS 变量

1
2
3
body {
    color: var(--font-color);
}

主题切换系统

1
2
3
4
5
6
7
8
9
/* 默认主题 */
:root {
    --font-color: #333;
}

/* 深色主题 */
[data-theme='dark'] {
    --font-color: #ffffffb3;
}

HTML 使用：

1
<html data-theme="dark">

JavaScript 切换：

1
document.documentElement.setAttribute('data-theme', 'dark');

浏览器特定样式

Firefox 专用样式

1
2
3
4
5
6
@-moz-document url-prefix() {
    * {
        scrollbar-width: auto;
        scrollbar-color: var(--scrollbar-color) transparent;
    }
}

作用：仅在 Firefox 浏览器中生效

Webkit 滚动条样式

1
2
3
.table-wrap::-webkit-scrollbar {
    height: 5px;
}

作用：Chrome/Safari/Edge 浏览器滚动条样式

常用样式模式

水平分隔线样式

双线样式

1
2
3
4
5
6
hr.style-two {
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}

渐变样式

1
2
3
4
5
6
7
.post-content > hr {
    height: 1px;
    background-image: linear-gradient(to right,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0));
}

表格优化样式

1
2
3
4
5
6
7
8
9
10
.table-wrap {
    word-break: keep-all;
    white-space: nowrap;
    overflow: auto;
}

td:not([class="code"]), th {
    max-width: 820px;
    overflow: hidden;
}

图片约束样式

1
2
3
4
#post img {
    max-height: 450px;
    width: auto;
}

效果：限制图片高度，保持宽高比例

优先级与特殊语法

!important 规则

1
background-image: unset !important;

作用：强制让样式规则获得最高优先级

优先级顺序：

  1. !important 规则
  2. 内联样式（style属性）
  3. ID 选择器
  4. 类选择器/属性选择器/伪类
  5. 元素选择器/伪元素

通配符选择器

1
2
3
*::-webkit-scrollbar {
    width: 8px;
}

作用：* 选择所有元素，配合伪元素使用

选择器记忆技巧

元素.类 = 元素本身有类 (hr.style-two)
.类 元素 = 类内部元素 (.style-two hr)
选择器,选择器 = 并列关系 (td, th)
父 > 子 = 直接子元素 (.post-content > hr)
:not() = 排除特定元素 (td:not(.code))
:: = 伪元素（创建虚拟元素）
= 伪类（选择元素状态）

实用提示

  1. CSS 变量定义在 :root 中，全局可用
  2. 媒体查询用于响应式设计和设备适配
  3. 属性选择器可以基于 HTML 属性精确选择元素
  4. 浏览器前缀用于处理浏览器兼容性问题
  5. 否定伪类可以灵活排除不需要样式的元素
  6. !important 谨慎使用，会破坏 CSS 级联规则
  7. 伪元素创建真实可见的虚拟元素，伪类选择元素状态
  8. 通配符 * 可以匹配所有元素

快速查询表

问题：定义全局变量 → 解决方案：:root { –var: value; }
问题：主题切换 → 解决方案：[data-theme=’dark’] { }
问题：触摸设备优化 → 解决方案：@media (hover: none) and (pointer: coarse)
问题：排除特定元素 → 解决方案：:not(.class-name)
问题：Firefox 特定样式 → 解决方案：@-moz-document url-prefix()
问题：创建虚拟元素 → 解决方案::::before, ::after
问题：选择元素状态 → 解决方案::hover, :focus, :checked
问题：强制样式优先级 → 解决方案：property: value !important;