为什么元素a不采用其前辈的文本颜色

Question

这是代码

<nav class="navbar">
        <h1 class="logo">ADVENTURE</h1>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tour</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">About</a></li>
            <li class="ctn"><a href="#">Contact</a></li>

        </ul>
    </nav>

我尝试将导航栏的文本颜色设置为#fff（白色） h1 改变了，但 a 元素不受影响

Answer 1

浏览器将自己的默认样式应用于链接（“a”元素）。这些默认值通常包括蓝色（表示未访问的链接）和紫色（表示已访问的链接）。要覆盖它，您需要一个明确针对“a”元素的规则。

.navbar a { /* Targets links within the navbar */
    color: #fff; 
}