Question

我正在寻找更改wordpress小部件区域行的背景颜色。我正在寻找最后一个css代码添加到我的style.css中，将黑色变为奶油色：＃fcf8ee

我目前有：

.widget {

        background-color: #fcf8ee;
        color: #000;
}

<div class="footer-widgets" id="genesis-footer-widgets">
  <h2 class="genesis-sidebar-title screen-reader-text">Footer</h2>
  <div class="wrap">
    <div class="widget-area footer-widgets-1 footer-widget-area">
      <section id="text-2" class="widget widget_text">
        <div class="widget-wrap">
          <div class="textwidget">
            <p>...</p>
          </div>
        </div>
      </section>
    </div>
    <div class="widget-area footer-widgets-2 footer-widget-area">
      <section id="text-4" class="widget widget_text">
        <div class="widget-wrap">
          <div class="textwidget">
            <p>...</p>
          </div>
        </div>
      </section>
    </div>
    <div class="widget-area footer-widgets-3 footer-widget-area">
      <section id="text-3" class="widget widget_text">
        <div class="widget-wrap">
          <div class="textwidget">
            <p>...</p>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>

widget area screenshot

我已经尝试过.widget-wrapper .footer-socket-wrapper和.widget-title 我错过了什么？

Answer 1

我已经查看了您的网站（可以从图片附件中收集地址）并编辑帖子以包含您的页脚代码的简化版本。 Using the browser's devtools/inspector，您可以看到背景颜色应用于整个+----+------+-------+ | Id | Time | Value | +----+------+-------+ | 1 | A | 1 | | 2 | B | 10 | | 2 | C | 3 | | 2 | D | 6 | | 3 | E | 2 | | 4 | F | 9 | | 4 | G | 4 | | 4 | H | 17 | +----+------+-------+区域，因此选择此选项可以获得所需结果的简单修复：

.footer-widgets

您可以指定与页面相同的背景颜色，但如果您将背景颜色设置为透明，那么如果您的页面的背景颜色不变，则不必担心更改此行代码变化

.footer-widgets { background-color: transparent; color: #000000; }选择了多个孩子，但你需要得到父母。熟悉devtools是了解和调试此类问题的最佳方法。祝你好运！

Wordpress小部件区域背景颜色

1 个答案: