：如果预先定义，目标不会改变背景颜色

Question

是否有原因导致此代码不起作用但以下代码起作用。

不工作：

#contact {
border-radius: 10px;
max-width: 40%;
margin: 2% 4%;
float: left;
padding-left: 2%;
padding-bottom: 2%;  
color: black 
background-color: #CF8D56;
}

:target {
background-color: #E6E6E6;
color: black;
margin-bottom: 20px;
}

Codepen：http://codepen.io/anon/pen/QbWmbj

工作：

#contact {
border-radius: 10px;
max-width: 40%;
margin: 2% 4%;
float: left;
padding-left: 2%;
padding-bottom: 2%;
color: black  
background-color: #CF8D56;
}

#contact:target {
background-color: #E6E6E6;
}

Codepen：http://codepen.io/anon/pen/RPwMNE

我不明白为什么第一个示例不起作用，因为如果我在不预先定义#contact background-color 的情况下做同样的事情，它会起作用：

工作：

#contact {
border-radius: 10px;
max-width: 40%;
margin: 2% 4%;
float: left;
padding-left: 2%;
padding-bottom: 2%;  
color: black 
}

:target {
background-color: #E6E6E6;
color: black;
margin-bottom: 20px;
}

Codepen：http://codepen.io/anon/pen/KpKodM

有什么原因吗？

Answer 1

这是由于 CSS 特殊性优先级。通过元素的 id 定义规则比通过伪选择器定义规则具有更高的优先级。有关优先级的完整说明，请查看this MDN article。

您可以通过添加 important 关键字来覆盖优先级。在您的第一个示例中，将您的样式规则更新为

:target {
  background-color: #E6E6E6 !important;  
}

它应该可以工作。

正如@BoltClock 在他们的评论中正确指出的那样，通常最好不要过度使用important 关键字，并尽可能使您的其他CSS 选择器更加具体，就像您在第二支笔中所做的那样。

简短回答：您已经有了正确的解决方案:)