html - CSSがdivクラスにある場合、liの色を変更します

Question

クラスフッターリストを持つdivのクラスがあり、liのすべてのテキストを白に変更する必要があります。

htmlは次のようになります。

     <div id="footer-middle-left-right">
                        <div class="footer-list">
                            <ul>
                                <li>FAFSA Guide</li>
                                <li>Scholarship Finder</li>
                                <li>State Education</li>
                                <li>Ready UP</li>
                            </ul>
                        </div>
                        <div class="footer-list">
                            <ul>
                                <li>Terms of Service</li>
                                <li>Privacy Settings</li>
                                <li>FAQ</li>
                            </ul>
                        </div>
                        <div class="footer-list">
                            <ul>
                                <li>How it Works</li>
                                <li>Submit a School</li>
                                <li>Submit a Professor</li>
                                <li>Report a Misspelling</li>
                            </ul>
                        </div>
</div>

明らかに、すべてのliに別のクラス要素を追加するのはやり過ぎであり、実際には保守できません。私はcssにかなり慣れていないので、クラス内のすべてのliを選択する正しい方法を理解できません。

私は次のようなことを試しました：

.footer-list.li{
     color: white;
}

無駄に。これに関するヘルプ、推奨読書、またはその他のcssアドバイスをいただければ幸いです。私はバックエンドの人の方が多いので、これは私がこれのcss部分について本当に心配しなければならなかった最初のものです、それで私は少し迷子になりました！

Answer 1

実際には、クラスにする.前に追加しているので、これを試してくださいli

.footer-list li { /* This selects li inside the class .footer-list */
    color: #fff;   /* Even white is fine */
 }

または、具体的に使用することをお勧めします

.footer-list ul li { /* Will apply to li which are inside ul which is inside .footer-list only */
    color: #fff;
 }

Answer 2

セレクター：

.footer-list.li{
     color: white;
}

「フッターリストとliの両方のクラスを持つ要素を選択してください」と言います。

これはあなたが望むものには正しくありません、あなたはそれらの間にスペースを追加してドットを削除する必要があります：

.footer-list li{
     color: white;
}

<li>これにより、クラスフッターリストを持つ任意の要素内の任意の要素が選択されます:)

Answer 3

Just remove the dot before li

.footer-list li{
     color: white;
}