：如果预定义目标不更改背景颜色

是否有原因导致此代码无法正常工作，但下面的代码无效。：如果预定义目标不更改背景颜色

不工作：

#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背景色它的工作原理：

工作：

#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

的任何原因？

来源

2015-04-23 Ash

对这篇文章CSS特异性的读取：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – Shaggy

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

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

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

它应该可以工作。

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

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

来源

2015-04-23 10:18:35 thomaux

或者，您可以使用已经显示的解决方案来解决问题：使用更具体的选择器（如此处所述）。 – BoltClock

@BoltClock当然，只是指出有很多方法可以覆盖默认行为。在这种情况下制定更具体的规则绝对是更好的解决方案，我已经将其添加到我的答案中。 – thomaux

：如果预定义目标不更改背景颜色

回答

相关问题