html - 如果它在 div 类中,CSS 会更改 li 的颜色

标签 html css css-selectors

我有一个带有 footer-list 类的 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 部分,所以它让我有点迷茫!

最佳答案

实际上你在 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;
 }

关于html - 如果它在 div 类中,CSS 会更改 li 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14066728/

相关文章:

jquery - 监视器和浏览器屏幕分辨率网站设计

javascript - 使用表单按钮填充文本输入

java - 更改方法findByOneCss,他收到了不止一种含义和所有

html - Stuck--响应式设计的图像网格布局和媒体查询

javascript - 使用 jQuery 过滤 html 字段

html - 使用 nth of type 或 nth-child 来定位元素?

css - 选择第二个 child

jquery - HTML 选项卡 CSS 在 firefox 和 chrome 中工作,但在 internet explorer 中不工作

html - 缩小标题背景而不是 100% 页面宽度

css - 在图表 (R) 的单个点上添加水平误差线