时间戳

首页 > 解决方案 > 为什么颜色没有显示在我的 CSS 中？如果我注释掉页脚的颜色，它确实会出现，但其余文本看起来像垃圾

html - 为什么颜色没有显示在我的 CSS 中？如果我注释掉页脚的颜色，它确实会出现，但其余文本看起来像垃圾

问题描述

<footer id="footer">
        <div id="footerRight">
            <ul>
                <li><a class="currentbottomnav" href="about.html">About</a></li>
                <li><a href="store.html">Store</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>

        </div>

        <div id="footerLeft">
            <p>Follow us</p>
            <ul>
                <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
            <p>.........................</p>
        </div>
    </footer>

CSS------------------------------------------------ -

footer {
color:white;
position:absolute;
bottom:0;
width:100%;
height: auto; 
background-color: rgba(255, 255, 255, 0.1);
padding: 15px;
box-sizing: border-box;/*Removes the extra width on the box*/
border-radius: 50% 50% 0 0 / 5%;

}

footer #footerLeft a{
    font-size:25px;
    text-decoration: none;
    color: whitesmoke;
}
footer #footerRight a{
    text-decoration: none;
    color: whitesmoke;
    margin:10px;
}

.currentbottomnav {
    color: aqua; 
}


footer ul {
    list-style: none;

}

footer li {
    display:inline-block;
}

footer #footerRight a:hover{
    color: rgb(90 90 90);
    font-weight: 300;
    transition-duration: 0.4s;
}
footer #footerLeft a:hover{
    color: rgb(90 90 90);
    font-weight: 300;
    transition-duration: 0.4s;
}

#footerRight{
    float:right;

}
#footerLeft{
    float: left;    
}

我说的是“页脚#footerRight a{...}”，一个。如果我在那里注释掉 whitesmoke，第一个元素的颜色会按照它的意图弹出（这就是我想要的），但其余元素不再漂亮，因为它们不再使用 whitesmoke 定制。

我正在尝试更改页脚和页眉链接中快速链接的颜色。我得到了用于页眉链接的那些，但现在当我尝试为页脚做那些时，它不起作用。我正在使用一个类来改变颜色。

标签： htmlcss

解决方案

由于您在 CSS 中使用了 ID，因此未显示浅绿色。ID 优先于类名的任何标准使用。

所以.currentbottomnav被footer #footerRight a

快速解决您的问题的方法是更改​​为footer #footerRight .currentbottomnav.

然而，问题的症结在于使用 ID 来挂钩样式。而是为每个元素创建一个类并使用它们。ID 非常适合为 javascript 等提供独特的钩子以供使用，但在 CSS 中，除非绝对必要，否则最好避免使用它们。

推荐阅读