Question

我已经向谷歌询问了这个问题，而且我花了很长时间进行实验。我不可能重新创建发生的整个HTML和CSS环境，但这是其中的一部分：

#footer-copyright{
    clear:both;
    color:black !important;
    font-size: 12px !important;
    text-align:center !important;
}

<footer id="footer" class="fullwidth">
    <div class="container">
        <div id="footer-section-one" class="col-sm-7 col-xs-12">
            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Section One')) : endif; ?>
        </div>
        <div id="footer-section-two" class="col-sm-5 col-xs-12">
            <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Section Two')) : endif; ?>
        </div>
    </div>
    <div class="container">
        <p id="footer-copyright">This text is immune to formatting</p>
    </div>
    </footer>

无论我尝试过什么，在页脚对象的p样式中都会显示“此文本不受格式化影响”的文本。我已经尝试使CSS ID更具体（footer.footer-copyright）。我已尝试将ID放在DIV上，然后指定样式为“＃footer-copyright p {”。我已尝试将footer-copyright作为类样式和特定ID的样式（就像现在一样）。我不想让你列出我尝试过的所有事情，但想想排列和组合。

我花了很多时间在Chrome上检查段落，它似乎根本没有样式，或者采用#footer p定义的样式。

我发现的唯一作用是完全覆盖CSS并将样式信息放入段落本身（“

如果可以，请解释为什么我似乎无法覆盖父对象的CSS样式，以及如何使用Chrome的HTML层次结构报告来了解如何指定CSS样式。

谢谢！

Answer 1

它在使用您的代码的代码段中工作（见下文）

如果您需要更具体的选择器，可以使用以下选择器：

footer#footer > div.container > p#footer-copyright { ... }

这会考虑您在代码中包含的所有代码，类和ID。

（我在规则中添加了背景颜色以验证它）

footer#footer > div.container > p#footer-copyright {
  clear: both;
  color: black !important;
  font-size: 12px !important;
  text-align: center !important;
  background: #fa0;
}

<footer id="footer" class="fullwidth">
  <div class="container">
    <div id="footer-section-one" class="col-sm-7 col-xs-12">
      <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Section One')) : endif; ?>
    </div>
    <div id="footer-section-two" class="col-sm-5 col-xs-12">
      <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Section Two')) : endif; ?>
    </div>
  </div>
  <div class="container">
    <p id="footer-copyright">This text is actually NOT immune to formatting</p>
  </div>
</footer>

Answer 2

在上面的示例中，您有这个......

<div class="container">
  <p id="footer-copyright">This text is actually NOT immune to formatting</p>
</div>

在你的ACTUAL页面中你有这个......

<div class="container">
  <p>Copyright © 2017 - Do The Most Good, Montgomery County, MD</p>
</div>

使用这些语句渲染/设置ACTUAL页面中的元素（P标签）......

#footer p
{
  color:#fff;
}

什么时候，你想要的是它用这种风格设计......

#footer-copyright p
{
  clear:both;
  color:black !important;
  font-size: 12px !important;
 text-align:center !important;
}

所以你需要的只是你的代码......

<div class="container">
  <p id="footer-copyright">Copyright © 2017 - Do The Most Good, Montgomery County, MD</p>
</div>

只是因为没有设置ID标签，因此没有为页脚版权元素（P标签）分配样式。

Answer 3

我正在查看您发送的页面上的HTML，而不是您发布的代码。

指示风格的声明是：

#footer p{
    color:#fff;
}

实际上，以下代码根本没有运行：

#footer-copyright p{
    clear:both;
    color:black !important;
    font-size:12px !important;
    text-align:center !important;
}

您可以看到代码中没有#footer-copyright。

您可以在控制台中运行以下命令：

$('#footer-copyright p').length;
$('#footer p').length;

#footer-copyright返回零长度。

在嵌套DIV中应用任何样式时遇到问题

3 个答案: