提问者:小点点

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


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


共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;
}

匿名用户

  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
}