如何在WordPress中添加CSS代码，自定义元素样式

Last updated: Jan 21 2025

在WordPress中添加自定义CSS代码是调整网站外观和感觉的常用方法。您可以通过Elementor编辑器或主题的自定义功能为特定元素添加CSS样式。

添加CSS代码的两种方式

WordPress中常用的添加CSS代码的方式有两种：

• Elementor编辑器: 适合为单个页面的特定元素添加独立的CSS样式。
• 主题自定义: 更适合全局设置，例如为整个网站的图片添加边框。

在Elementor中添加CSS代码

首先，使用Elementor编辑需要添加CSS代码的页面。

选中要添加CSS样式的元素，打开“高级”选项卡，就能看到“自定义CSS”区域。在这里添加相应的CSS代码即可。

通常，我们会先给指定的元素添加一个CSS ID或CSS类名，以便更好地使用CSS选择器来为对应元素添加样式。

注意

CSS ID是唯一的，一个页面中不应出现两个相同的CSS ID。而CSS类名可以用于多个元素。在使用选择器时，元素ID前要加“#”，类名前面要加“.”。

在主题中添加CSS代码

进入WordPress后台，导航至 外观 → 自定义 → 额外CSS。

在这里添加的CSS代码将应用于整个网站。这种方式更适合添加全局CSS样式。如果您只想对某个页面的特定元素添加样式，不建议在这里添加，因为它会增加每个页面的代码量。

除了给指定元素添加类名或ID，元素本身也可能有自己的ID或类名。您可以在浏览器中打开网站前端页面，按F12审查元素，查看对应元素的类名或ID。

至此，本篇关于在WordPress中添加CSS代码的两种方式分享结束。