CSS id 元素覆盖其子元素的定义

发布于 2024-10-10 05:02:49 字数 264 浏览 11 评论 0原文

#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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

旧梦荧光笔 2024-10-17 05:02:49

您可以通过更改规则来修复它:

#top a {}
#top .mainlink a {}

You can fix it by changing your rules:

#top a {}
#top .mainlink a {}
早茶月光 2024-10-17 05:02:49

由于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.

手心的温暖 2024-10-17 05:02:49

当样式表级联时,命名 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.

攀登最高峰 2024-10-17 05:02:49

#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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文