如何同时向标签添加多个 CSS 属性？

Question

我正在尝试通过 Appearance>Customize 中的 Additional CSS 部分以我想要的方式修改我的 WordPress 主题。

我希望 entry-content 类中的所有h1 标签都像这样：

所以我使用了这个代码：

.entry-content h1 {
  background-color: #cfbc00;

    display: inline;
    background-color:#000000;
}

我希望将整个块着色为#cfbc00，并将文本本身的背景设置为黑色。但是浏览器不会同时将这些应用到我的标签，它只应用其中一个属性。我该怎么办？

Answer 1

如果您无法访问 HTML 代码，那么这里有一个 CSS 解决方法：

.entry-content
{
  position: relative;
}

.entry-content h1::before
{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  background-color: #cfbc00;
  height: 40px;
  z-index: -1;
}
.entry-content h1 {
    display: inline;
    background-color: #000000ad; /* Sets transparency according to sample image */
    top: 0;
    /* Line height to maintain the height of the :before element */
    line-height: 40px;
    color: #fff;
    font-size: 35px;
    padding: 5px;
}

<div class="entry-content">
<h1>Test title</h1>
</div>