php - CSS 页脚样式

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;}

希望对您有所帮助!