html - 链接项 anchor 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”的白色前景色仅出现在元素符号上。这是因为 this post说明，当存在 href 属性时，颜色属性不会被 a 标签继承。

但是我不明白“div nav ul li a”的颜色值是如何与(伪选择器)[ http://www.w3schools.com/css/css_pseudo_classes.asp] “div nav ul li a:link”、“div nav ul li a:visited”、“div nav ul li a:hover”和“div nav ul li a:active”。

Answer 1

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