先定位再动手
修改模板CSS最常见的错误是直接打开样式文件凭感觉改。正确顺序是：在浏览器中打开页面，右键点击要改的元素，选择“检查”，在开发者工具中确认三件事——元素的类名或ID、当前生效的CSS规则来自哪个文件、是否有更高优先级的选择器在覆盖。
用开发者工具读样式
开发者工具的Styles面板会按优先级列出所有命中规则，被划掉的属性表示已被覆盖。找到真正生效的那一条，记下它的选择器和文件位置，再去修改，能避免改了半天没反应。
选择安全的修改位置
不同建站方式，CSS修改入口不同：
自建站点
优先改自定义CSS文件或模板提供的“额外CSS”输入框。直接改模板核心样式文件虽然生效快，但模板升级时会被覆盖，长期维护成本高。
WordPress类CMS
使用子主题的style.css，或主题自定义器里的“额外CSS”。不要改父主题文件，否则更新即丢失。
页面构建器
Elementor、Divi等通常有单页自定义CSS区域，适合只影响当前页面的微调；全局修改仍应放在主题层。
写对选择器与优先级
CSS冲突大多来自优先级。规则顺序是：行内样式 > ID选择器 > 类/属性/伪类 > 元素选择器。同级则后定义的覆盖先定义的。
减少!important的使用
!important会破坏层叠逻辑，让后续维护变难。能用更具体的选择器解决就不要用它。例如把.btn改成.content .btn，通常就能压过模板默认样式。
用浏览器验证再落盘
在开发者工具中直接编辑样式，实时看效果，确认后再复制到正式文件。这样比反复刷新试错快得多。
改完必须检查的三件事
- 备份：改前导出原文件或记录原规则，出问题能回退。
- 响应式：在手机、平板宽度下再看一遍，模板常在不同断点写不同规则，桌面改好不代表移动端正常。
- 缓存：清浏览器缓存和站点缓存插件，否则看到的可能还是旧样式。
常见问题速查
- 改了没反应：检查选择器是否命中、是否被更高优先级覆盖、缓存是否清除。
- 只有部分页面生效：确认该页面是否加载了你修改的CSS文件。
- 布局错位：优先检查盒模型相关属性，如width、padding、box-sizing，而不是急着加定位。
掌握“定位—选位置—控优先级—验证”这个流程，修改网站模板CSS就不再是碰运气。
