除非我指定确切的选择器，否则不会应用 CSS 样式

Question

我有这种情况，我觉得很奇怪，在哪里

a:hover {
    color: #FD5454;
}

没用，但是

#feed h3 a:hover {
    color: #FD5454;
}

确实如此。自从我广泛使用 CSS 以来已经有一段时间了，所以我不知道为什么。有人可以向我解释一下吗？这肯定是一个愚蠢的问题，但我自己无法弄清楚。提前谢谢！

编辑： 这是它目前正在影响的代码：

<div id="feed">
    <h2>Follow us on instagram</h2>
    <h3><a href="http://www.instagram.com/johndoe">@johndoe</a></h3>
</div>

以下是完整的样式规则：

a:link {
    text-decoration: none;
    color: white;
}

#feed {
    text-align: center;
    background: url("../img/Feed_bg.jpg") center no-repeat;
    height: 100vh;
}

#feed h2 {
    color: #789199;
    padding-top: 5vh;
}

#feed h3 a {
    text-decoration: none;
    font-family: "Lato Light";
    color: white;
}

/* This is working */
#feed h3 a:hover {
    color: #FD5454;
}

/* This is not */
a:hover {
    color: #FD5454;
}

Answer 1

这是CSS specificity 的情况。在这里，您的 a:hover 选择器不够具体，无法覆盖 #feed h3 a 规则。正如 MDN 所述：

以下选择器类型列表是通过增加特异性：

1. 类型选择器（例如 h1）和伪元素（例如 :before）。
2. 类选择器（例如 .example）、属性选择器（例如 [type="radio"]）和伪类（例如 :hover）。
3. ID 选择器（例如，#example）。

正如您所发现的，通过在悬停选择器 (#feed a:hover) 前添加 #feed 可以提高覆盖其他选择器的特异性。

jsFiddle example

网上有很多CSS specificity calculators，你可以看到a:hover的特异性是0011，而#feed a:hover的特异性是0111。