如何为WordPress Advanced Custom Fields输出的动态文本设置样式？

解决方法 #

• 方法1：给ACF动态内容加外层自定义类（最稳妥）
  输出ACF字段的模板代码处，给内容外层套一个带唯一自定义类的容器，示例代码：

  <div class="custom-acf-text-block">
    <?php the_field('你的ACF字段名'); ?>
  </div>
  

  之后写样式时全部以这个类作为父选择器限定范围，完全不会影响全局样式，示例SCSS：

  .custom-acf-text-block {
    p {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 10px;
    }
    a {
      color: #2563eb;
    }
    // 其他你需要的元素样式
  }
  

  只需要新增十几行代码，完全不需要修改原有SCSS的全局样式配置。

• 方法2：无需改模板的快捷方案
  如果不方便调整ACF输出的模板代码，可直接在放置该内容的区块（短代码所在的古腾堡区块/页面编辑器区块）的「高级设置」里，填写自定义CSS类，后续样式规则和方法1一致即可，全程不用改模板代码。

• 方法3：利用已有唯一父类
  按F12打开浏览器开发者工具，定位到该ACF内容块，查找外层最近的、全站唯一的父级类/ID，直接用该父级作为样式限定前缀即可，连自定义类都不需要额外加。

补充说明 #

如果出现样式不生效的情况，只需要叠加一层父类选择器提升优先级即可，无需使用!important，不会对原有样式体系造成侵入。

内容的提问来源于stack exchange，提问作者Nikolaj Popov