链接项锚CSS前景色{}和：foo{}之间的交互

Question

我有以下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：活动”交互。

Answer 1

1. 颜色不由a元素继承，因为您在li级别停止了。div nav ul LI

这将只得到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
}

Answer 2

因为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;
}