EP02. “Elements 面板：检查与临时修改 HTML、CSS”

首页 › PC 工具 › Developer Tools · Browser DevTools · EP02

约 8 分钟· #EP02#Browser DevTools

Elementor 里明明把标题设成蓝色，前台却显示黑色？Elements 面板会直接告诉你是哪一条 CSS 把它盖掉了
左边是网页的 HTML 结构（DOM 树），右边是这个元素套用的所有 CSS，被覆盖的规则会画删除线
在这里可以直接改文字、改颜色、改间距，即时看效果，满意了再把数值抄回 WordPress 的「额外 CSS」或 Elementor
还能看盒模型（margin / border / padding），解决「为什么这里多了一块空白」

重点内容

选取元素

方法	做法
右键	在网页元素上按右键 → Inspect，DevTools 直接跳到那段 HTML
选取工具	按 DevTools 左上角箭头（或 `Ctrl+Shift+C`），鼠标移到网页上会显示元素的尺寸和标签，点下去选取
在 DOM 树里	用 ↑ ↓ 键移动，← → 键收合/展开
搜寻	在 Elements 面板按 `Ctrl+F`，可以搜文字、class 名称或 CSS 选择器

左边：DOM 树（HTML）

操作	做法
改文字	双击文字直接编辑，按 Enter 完成
改属性（class、href、src）	双击属性名称或值
编辑整段 HTML	右键 → Edit as HTML
暂时隐藏元素	选取后按 H 键（再按一次恢复）
删除元素	选取后按 Delete
复制选择器	右键 → Copy → Copy selector（写自订 CSS 时很方便）

💡 想看拿掉某个弹窗、横幅之后版面长怎样，按 Delete 删掉它就好，重新整理就回来了。

右边：Styles 分页（CSS）

规则按优先级由上往下排列，最上面的 element.style 是直接写在 HTML 上的内联样式
每条规则右边显示来源文件和行数，例如 style.css:120，WordPress 网站常见 elementor-post-15.css、theme.min.css
画删除线的属性 = 被更高优先级的规则覆盖了，没有生效
属性名前面有 ⚠️ 黄色三角 = 这个值写错了（无效的属性或值）

操作	做法
改数值	点值，直接打；数字可以用 ↑ ↓ 键加减 1，`Shift+↑` 加减 10
暂时关掉某条属性	取消勾选属性前面的方框
新增属性	点规则最后的空白处，或点 `}` 前面
新增一整条规则	按右上角 +（New Style Rule）
选颜色	点颜色前面的小方块，打开取色器，还可以用滴管吸网页上的颜色
模拟 hover / focus 状态	按 :hov，勾选 `:hover`、`:focus` 等，不用一直把鼠标停在按钮上
临时加 / 拿掉 class	按 .cls

Computed 分页：最终结果

显示这个元素最终真正生效的每一个 CSS 值（例如 font-size: 18px）
展开属性可以看到是从哪条规则来的
勾选 Show all 会连默认值也一起列出
找「这个字到底是什么字体、什么大小」时，看 Computed 比在 Styles 里一条条找快

盒模型（Box Model）

flowchart TB
    subgraph M["margin 外距（橙色）"]
        subgraph B["border 边框（黄色）"]
            subgraph P["padding 内距（绿色）"]
                C["content 内容（蓝色）"]
            end
        end
    end

Styles 或 Computed 分页里有一个层层包住的方框图，双击数字可以直接修改
鼠标移到 DOM 树的元素上时，网页上会用同样的颜色显示 margin（橙）、padding（绿）
「为什么这里有一块多出来的空白？」→ 选取元素，看是 margin 还是 padding，再回 Elementor 的 Advanced → Margin / Padding 修改

实操示例：标题颜色设了却不生效

在标题上按右键 → Inspect
在 Styles 找 color，发现自己设的 color: #1E40AF 有删除线
往上看，有一条优先级更高的规则，例如主题的 .entry-content h2 { color: #111 }
在 DevTools 里试：取消勾选主题那条，确认标题变蓝了
回到 WordPress，用更具体的选择器写进 外观 → 自定义 → 额外 CSS，或直接在 Elementor 的标题组件设颜色

⚠️ 不要什么都加 !important 硬压，之后会越来越难改；先用 DevTools 找出是谁覆盖了你，再写更具体的选择器。

其他分页

分页	用途
Layout	显示 Grid、Flexbox 的格线，排查排版
Event Listeners	看这个元素绑了哪些 JavaScript 事件（例如点击）
Fonts（在 Computed 最下面的 Rendered Fonts）	看实际用了哪个字体文件

学完你会

✅ 用 Inspect 或选取工具找到任何元素
✅ 在 Styles 看出哪条 CSS 被覆盖（删除线）、临时修改数值
✅ 用 :hov 模拟 hover 状态
✅ 用盒模型找出多余空白的来源

常见错误

❌ 在 DevTools 改好就关掉浏览器：改动会消失，要先把数值、选择器抄下来。
❌ 看到删除线就加 !important：先找出覆盖它的规则，用更具体的选择器解决。
❌ 一直把鼠标停在按钮上想看 hover 样式：用 :hov 勾选 :hover。
❌ 只看 Styles 找不到最终值：切到 Computed 看最终生效的值和来源。
❌ 改了 CSS 却没生效，其实是缓存：WordPress 装了缓存插件或 Cloudflare 的话，改完要清缓存（见 wp-tools 的 LiteSpeed Cache 笔记）。

Sources

官方文档：

📝 测验一下共 7 题