:target 如果预定义则不改变背景颜色

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

代码笔：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;
}

代码笔：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;
}

代码笔：http://codepen.io/anon/pen/KpKodM

有什么原因吗？

Answer 1

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

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

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

它应该可以工作。

正如@BoltClock 在他们的评论中正确指出的那样，通常更好的方法是不要过度使用 important 关键字，并在可能的情况下让你的其他 CSS 选择器更具体，就像你有用你的第二支笔完成。

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

:target 如果预定义则不改变背景颜色

:target not changing background-color if pre defined

css

css-selectors