如何在Divi代码模块中为内嵌HTML应用自定义CSS样式？

你好，针对你遇到的Divi代码模块中blockquote样式不生效的问题，我给你几个可行的解决方案，同时帮你修正了原CSS里的小错误：

方案1：全局自定义CSS（推荐） #

这是最稳定的全局生效方式，适合希望全站blockquote都用这个样式的场景：

1. 登录WordPress后台，找到 Divi > Theme Options
2. 切换到 General 标签下的 Custom CSS 区域
3. 把修正后的CSS代码粘贴进去，保存设置即可

修正后的CSS代码（修复了原代码中引号乱码的问题）：

blockquote { 
  padding: 20px 60px; 
  background: #eee; 
  border-radius: 10px; 
  font-family: arial; 
  line-height: 1.625; 
  position: relative; 
} 
blockquote p { 
  text-align: center; 
} 
blockquote span { 
  position: relative; 
  display: inline-block; 
} 
blockquote span:before { 
  content: "“"; 
  font-size: 72px; 
  color: #79b83a; 
  position: absolute; 
  left: -40px; 
  top: 40px; 
  line-height: 0; 
} 
blockquote span:after { 
  content: "”"; 
  font-size: 72px; 
  color: #79b83a; 
  position: absolute; 
  right: -40px; 
  bottom: -10px; 
  line-height: 0; 
}

如果你只想让当前代码模块的blockquote生效，给模块加个自定义类即可：

• 打开代码模块的 Advanced > CSS ID & Classes
• 在 CSS Class 输入框中填写 custom-testimonial（自定义类名，可自行修改）
• 然后把CSS选择器改成 .custom-testimonial blockquote，其他样式不变，这样样式只会作用于这个模块内的内容。

方案2：代码模块内部嵌入CSS #

如果只想让这个模块单独生效，也可以把CSS直接写在代码模块的HTML内容里，用<style>标签包裹：

<style>
blockquote { 
  padding: 20px 60px; 
  background: #eee; 
  border-radius: 10px; 
  font-family: arial; 
  line-height: 1.625; 
  position: relative; 
} 
blockquote p { 
  text-align: center; 
} 
blockquote span { 
  position: relative; 
  display: inline-block; 
} 
blockquote span:before { 
  content: "“"; 
  font-size: 72px; 
  color: #79b83a; 
  position: absolute; 
  left: -40px; 
  top: 40px; 
  line-height: 0; 
} 
blockquote span:after { 
  content: "”"; 
  font-size: 72px; 
  color: #79b83a; 
  position: absolute; 
  right: -40px; 
  bottom: -10px; 
  line-height: 0; 
}
</style>
<blockquote><span>BPRO helped me realize the importance of customer organization and tracking, service tracking and just being on the top of things behind the scene. The more you grow —the more difficult this becomes —but having the right tools to keep your business organized is just as important as having the right tools to do job itself.</span> <p>Some Person - Some Day 2018</p></blockquote>

为什么之前的方法没生效？ #

你之前把CSS放在代码模块高级选项的主元素里，这个区域是用来设置代码模块本身外层容器的样式，而不是作用于模块内部的<blockquote>元素，所以样式自然不会生效啦。

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