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

我不明白为什么fisrt示例不起作用，因为如果我在不预先定义#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选择器更具体，就像你在第二笔中所做的那样。

简短的回答：你已经有了正确的解决方案：）

：如果预定义

1 个答案: