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

Question

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

我希望条目内容类中的所有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>