CSS - 字体颜色没有改变答案

【问题标题】：CSS - Font color is not changingCSS - 字体颜色没有改变
【发布时间】：2014-04-10 17:21:49
【问题描述】：

我正在尝试修复我的 TEXT 颜色的颜色，它只是白色，与背景颜色相同，尽管它的颜色设置为 :#1a6eb6 并且它在 #submenu ul li .text 中设置为相同的值我是prettz 迷路了，谁能帮帮我？

我的 HTML：

 <div class="submenu">
    <ul>
    <li><span class="text"><a href="#">DISKUSNÍ FÓRUM </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">KOMENTÁŘE </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">ZÁZNAM CHATU </a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    <li><span class="text"><a href="#">UŽÍVATELÉ</a></span><span class="horizontal-arrow"></span><span class="vertical-arrow"></span></li>
    </ul>
 </div>

我的 CSS：

.submenu{
    color: #1a6eb6;
    display: inline-block;
    height: 50px;
    width:780px;
}

.submenu ul {
    margin-left: 20px;
    padding-left: 0px;         
}

.submenu ul li{
    list-style-position: inside;    /* Bodka v novom riadku vo vnutry */
    list-style-type: none;          /* bez bodky */  
    background-image: url("images/shop_menu_bg.png");
    background-repeat: repeat-x;
    height: 38px;
    width: 187px;
    display: inline-block;
    color: #1a6eb6;         
}

.submenu ul li:hover {
    background-image: url("images/shop_menu_bg_hover.png");
    width: 187px;
    height: 38px;             
}

.submenu ul li .text{
    color: #1a6eb6;
    display: inline-block;    /* aby sa dala rovnomerne posunut sipka a nie podla dlzky textu*/
    height: 31px;
    width:115px;
    line-height: 28px;
    margin-left: 5px;         
}

.submenu ul li .horizontal-arrow{
    background-image: url("images/horizontal_arrow.png");
    background-repeat: repeat-x;
    display: inline-block;
    height: 19px;
    width: 14px;
    margin: 0px 0px 0px 45px;
    vertical-align: middle;       
} 

.submenu ul li:hover .horizontal-arrow{
    display:none;         
}

.submenu ul li .vertical-arrow{
    background-image: url("images/vertical_arrow.png");
    background-repeat: repeat-x;
    display:none;
    height: 12px;
    width: 19px;
    margin: 0px 0px 0px 45px;         
} 

.submenu ul li:hover .vertical-arrow{
    display: inline-block;             
}

可以在以下位置找到实时预览：http://funedit.com/andurit/new/

【问题讨论】：

标签： html css css3pie

【解决方案1】：

尝试将颜色添加到.submenu ul li .text a

.submenu ul li .text a{
    color: #1a6eb6;
}

字体颜色没有改变，因为您的 styles.css 具有以下样式，该样式覆盖了您为 .submenu ul li .text 指定的颜色

li a:link {
    color: #f7f7f7;
}

【讨论】：

【解决方案2】：

您需要设置<a> 标签的颜色，因为该标签的颜色为白色。

类似：

.submenu ul li a{
    color: #1a6eb6;
}

【讨论】：

【解决方案3】：

许多流行的用户代理样式表都包含一个选择a 并设置其颜色的规则：

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

这是一种蓝色的颜色。此外，您的style.css 有：

li a:link {
    color: #f7f7f7;
    font-weight: bold;
    text-decoration: none;
}

这会覆盖 UA 样式表，这就是链接显示为白色的原因。您需要使用您的规则实际选择 a：

.submenu a:link {
    color: #1a6eb6;
}

:link 部分是必需的，因为 li a:link 选择器的特殊性。您也可以使用.submenu li a 或其他更具体的选择器。

【讨论】：

【解决方案4】：

如果你只是想改变文本的颜色，你可能应该像这样使用“a”元素：

#submenu ul li a{

//your code

}

【讨论】：

【解决方案5】：

将元素的css第183行更改为

li a:visited
{
color: #1a6eb6;
}

或者您可以创建一个新的 CSS 选择器，例如

.submenu ul li a
{
color: #1a6eb6;
}

【讨论】：

【解决方案6】：

style.css line 183 - 你有li a:visited {color:#f7f7f7};

style.cc line 173 - 你有li a:link {color:#f7f7f7;}

这是我从 chrome 控制台获得的。检查你的css文件中的这些行并取出color:#f7f7f7

您还可以在 css 中使用 !important 规则来确保该规则覆盖任何其他规则。 What does !important in CSS mean?

.submenu{ color: #1a6eb6 !important;; }

【讨论】：