CSS id 元素覆盖其子元素的定义
#top a {
color: #C6D6CA;
margin: 0 25px;
text-decoration: none;
}
.mainlink a {
display: block;
height: 100%;
width: 100%;
margin: 0;
}
.mainlink div 位于 #top 中的某个位置。为什么#top a(父级)边距定义会覆盖 .mainlink a 中设置的边距定义?如何改变这种行为?
#top a {
color: #C6D6CA;
margin: 0 25px;
text-decoration: none;
}
.mainlink a {
display: block;
height: 100%;
width: 100%;
margin: 0;
}
.mainlink div sits somewhere in the #top one. Why's that the #top a (parental) definition of margin overwrites the one set in .mainlink a? How to change that behaviour?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
您可以通过更改规则来修复它:
You can fix it by changing your rules:
这称为选择器特异性。另请参阅:http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html< /a>
This is called selector specifity. See also: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
由于CSS“级联”,颜色将应用于该元素的任何子元素。您需要指定子项的颜色,并且可能需要在属性声明的末尾添加“!important”。
Since CSS "cascades" the color will apply to any of the element's children. You'll need to specify the color for the child and possibly need to add an "!important" to the end of the property declaration.
当样式表级联时,命名 ID 的优先级高于类。
http://www.w3.org/TR/CSS2/cascade.html
您可以使用
margin: 0 !important
强制覆盖。Named ids have a higher precedence than classes when the style sheets are cascaded.
http://www.w3.org/TR/CSS2/cascade.html
You can use
margin: 0 !important
to force the override.#top a
选择器的特异性.mainlink a
。 ID 选择器大大增加了选择器的特异性。每个 ID 都会将选择器的特异性增加 100 倍。每个类都会将特异性增加 10 倍。
既然如此,我会:
A. 将 ID 替换为类或
B. 将 ID 添加到第二个选择器。
The
#top a
selector has more specificity than.mainlink a
. ID selectors greatly increase the specificity of a selector.Each ID increase the specificity of the selector by a factor of 100. Each class increases the specificity by a factor of 10.
That being the case, I'd either:
A. Replace the ID with a class or
B. Add an ID to the second selector.