我有以下HTML代码
<div>
<nav>
<ul>
<li ><a href="http://a.dummy.com/">A</a></li>
<li class="selected"><a href="http://b.dummy.com/">B</a></li>
<li ><a href="http://c.dummy.com/">C</a></li>
</ul>
</nav>
</div>
和以下CSS代码
div nav ul li {
background: blue;
color: white;
}
div nav ul li.selected {
color: black;
}
在jsfiddle上运行。
文本内容条目“a”、“b”和“c”的白色前景色仅显示在项目符号上。这是因为正如本文所说明的,当href属性存在时,color属性不会被a标记继承。
但是,我不明白“div nav ul li a”的颜色值如何与(伪选择器)[http://www.w3schools.com/css/css_pseudo_classes.asp]“div nav ul li a:链接”、“div nav ul li a:访问”、“div nav ul li a:悬停”和“div nav ul li a:活动”交互。
因为a标记有浏览器设置的默认颜色(与p、span、div不同),所以您必须设置a标记的颜色。
div nav ul li {
background: blue;
color: white;
}
div nav ul li a {
color: white;
text-decoration:none;
}
div nav ul li.selected {
color: black;
}
div nav ul li.selected a{
color: black;
}
这将只得到li元素,而不是a元素。如果您想要a元素
div nav ul li a{
//CSS properties for the a element
}
2.psuedoSelector处理元素状态以及它在该状态下的外观。例如,如果想要更改a元素在悬停状态下的外观,可以执行以下操作:
div nav ul li a:hover{
color: orange;
//CSS properties for the a element after hover
}