[英]CSS - Font color is not changing
我正在尝试修复我的TEXT颜色的颜色,它的颜色与背景颜色相同,尽管事实是它的颜色设置为:#1a6eb6,并且它在#submenu ul li中设置为相同的值。它,有人可以帮我吗?
我的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/
尝试将颜色添加到.submenu ul li .text a
.submenu ul li .text a{
color: #1a6eb6;
}
字体颜色没有改变,因为您的styles.css具有以下样式,该样式覆盖了您为.submenu ul li .text
指定的颜色
li a:link {
color: #f7f7f7;
}
您需要设置<a>
标记的颜色,因为该标记具有白色。
就像是:
.submenu ul li a{
color: #1a6eb6;
}
许多流行的用户代理样式表都包含选择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;
}
由于li a:link
选择器的特殊性, :link
部分是必需的。 您还可以执行.submenu li a
或其他更具体的选择器。
如果您只想更改文本的颜色,则可能应使用如下所示的“ a”元素:
#submenu ul li a{
//your code
}
将元素的css行183更改为
li a:visited
{
color: #1a6eb6;
}
或者您可以创建一个新的CSS选择器,例如
.submenu ul li a
{
color: #1a6eb6;
}
style.css line 183
-您有li a:visited {color:#f7f7f7};
style.cc line 173
-您有li a:link {color:#f7f7f7;}
这是我从Chrome控制台获得的。 检查您的css文件中的这些行,并取出color:#f7f7f7
您还可以在CSS中使用!important
规则来确保该规则覆盖任何其他规则。 CSS中的!important是什么意思?
.submenu{ color: #1a6eb6 !important;; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.