html - CSS 选择器图像未显示在网站横幅或 Chrome 的开发者工具窗口中

Question

我正在开发一个带有大横幅的网站，该横幅在每个页面上显示不同。当我将背景图片放在页面选择器上时，背景图片不显示，但它会在主横幅 CSS 代码上工作。

这是我的 wordpress 网站 (WordPress 5.2) 运行的一个完全自定义的主题，由我从头开始开发。运行 PHP 版本:7.0.33。

.page-id-15 .bannerImage {} .postid-15 .bannerImage{}

我已经在 Chrome 开发者工具中尝试了背景图片和背景颜色，但没有显示它看到的是这种风格。

我已确认正确的页面/帖子 ID 为 15。

我已将背景图像/颜色放入 .bannerImage 中，它会按预期显示。

不确定还可以尝试什么。这应该很容易。

///这将显示背景图像和/或颜色///

.bannerImage {
    /* Set a specific height */
    height: 337px;

    /* Position and center the image to scale nicely on all screens */
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}   

///这将不会显示背景图像和/或颜色(显示颜色样式)///

.page-id-15 .bannerImage { background-color: #35CC4B; }
.postid-15 .bannerImage { background-color: #35CC4B; }

///HTML 代码///

<div class="bannerImage">
   <h2>Contact Us</h2>
</div>

///Word Press 管理 URL 以显示正确的页面/帖子编号///

http://box5308.temp.domains/~naiedmon/wp-admin/post.php?post=15&action=edit

///网址///

http://box5308.temp.domains/~naiedmon/contact-us

我希望看到一个高 337 像素、宽度为 100% 且在每个页面上都不同的横幅。 我实际看到的是显示 H2 的空白横幅空间。 Chrome 仅输出 .bannerImage 选择器，而不输出 .page-id-15 .bannerImage 或 .postid-15 .bannerImage 选择器。

---

***** 已更新 *****

下面我添加了我在查看 Chrome 开发者工具时看到的代码。与我完全同意的建议不同(我已经尝试过)，我的 .page-id-15 .bannerImage {} 选择器标签不会被浏览器读取和显示。我也尝试过 .postid-15 .bannerImage {}。这就是让我难过的地方。

Screen Capture of Code from Chrome Developer Tools

Answer 1

WordPress 有时会重写您的 CSS。我以前遇到过这个问题。尝试在所有 CSS 属性中使用“!important”。这可能有效。