CSS 页脚样式

我正在开发一个由其他人构建的WordPress网站，目前我正在尝试设置页脚样式，但遇到了一些问题。

首先，它不会通过选择标签中的任何div 来让我的风格，只有当我直接选择 html 元素（页脚 [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;
}

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