Question

我正在使用由其他人构建的WordPress网站，目前我正试图设置页脚样式并遇到一些问题。

首先，它不会通过选择标记中的任何div来让我的风格，它只有在我直接选择html元素（footer [role = contentinfo] p {...}）时才有效，甚至这很不稳定。

有人可以提供一些指导吗？这是页脚代码

  <?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
    </div><!-- #main .wrapper -->
    <footer id="colophon" role="contentinfo">
        <div class="footer-links">
            <ul>
                <li>About</li>
                <li>About JoeStick</li>
                <li>Our Products</li>
                <li>FAQs</li>
            </ul>
        </div>
        <div class="site-info">
            <p>YOU MUST BE OVER THE AGE OF 18 YEARS TO BUY AND OR USE ANY SOUTH BEACH SMOKE PRODUCT. Nicotine is a highly addictive
            substance derived from the tobacco plant. Our products do not treat, diagnose, or cure any disease, physical ailment, or
            condition. If you are allergic to nicotene or any combination or inhalents, if you are pregnant or breast-feeding, or if
            you have a heart condition, diabetes, high blood pressure or asthma, consult your physician before using South Beach Smoke
            nicotene products. Just like traditional tobacco cigarettes, South Beach Smoke Electronic Cegiarettes are not approved by
            the American FDA.</p>
        </div><!-- .site-info -->
        <div class="footer-nav">
            <ol>
                <li>Copyright &copy; 2013 SmokeSafely.com</li>
                <li>Terms and Conditions</li>
                <li>Warnings</li>
                <li>Privacy Policy</li>
                <li>Contact</li>
            </ol>
        </div>
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

这是我正在尝试使用的CSS

/* Footer */
}
footer[role="contentinfo"] {
    background-color: #082448;
    color: white;
    border-top: 1px solid #ededed;
    font-size: 12px;
    line-height: 2;
    margin-left: auto;
    margin-right: auto;
}
footer[role="contentinfo"] a {
    color: #686868;
}
footer[role="contentinfo"] a:hover {
    color: #21759b;
}
footer[role="contentinfo"] ul {
    width: 30%;
    float: left;
}
footer[role="contentinfo"] p {
    width: 65%;
    height: 30%;
    float: left;
    font-size: 10px;
}
footer[role="contentinfo"] ol {
    width: 100%;
    height: 5%;
    float: none;
}
footer[role="contentinfo"] ol li {
    float: left;
    display: inline;
}

目前我正在努力解决的主要问题是页脚上的背景颜色无法正确显示。再次，非常感谢任何帮助。

Answer 1

选择ID为

的页脚标记

#colophon {background-color:red;}

......或者你想要改变的任何东西。

有时候wordpress会覆盖这些规则，所以我使用（我知道，我确信这是一种可怕的做法，但它可以完成工作。）

#colophon {background-color:red !important;}

然后要抓取文档的某些部分，您可以使用child selector.

#colophon > div > ul > li {background-color:red;}

我希望这有帮助！

CSS页脚样式

1 个答案: