0

私は他の誰かによって構築された 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;
}

現在、私が苦労しているのは、フッターの背景色が正しく表示されないことです。繰り返しますが、どんな助けも大歓迎です。

4

1 に答える 1

0

次の ID を持つフッター タグを選択します。

#colophon {background-color:red;}

...または変更したいものは何でも。

ワードプレスはこれらのルールを上書きすることがあるので、私はこれを使用します (これは恐ろしい習慣だと思いますが、仕事は完了します)。

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

次に、ドキュメントの特定の部分を取得するには、子セレクターを使用できます。

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

これが役立つことを願っています！

于 2013-09-25T18:17:51.307 に答える