单个元素上的 CSS 类

Posted 2023-03-06

【中文标题】单个元素上的 CSS 类

【英文标题】：CSS Classes on Single Element

【发布时间】：2012-08-07 10:12:04

【问题描述】：

您好，我在博客上遇到了一些 CSS 问题。我的 Wordpress 主题在 CSS 文件中有一个帖子样式部分，其中有一个“条目”类，其中为文章区域内的链接定义了“a”属性。 我从 css 生成器生成了一个按钮，并将该按钮插入到使用 href 指向其他网站的文章中。我的 CSS 文件有这样的东西，

.Entry acolor:black;text-decoration:underline;

.button background:black;color:white And some other Styling;

我使用这段代码来显示按钮。

<a href="some link" class="button">Go to this link</a>

如果不使用 class="button"，链接会跟随 Entry 一个属性。但是当我使用 class 时，它会显示混合了 Entry a 和 class 按钮样式的按钮。我不希望按钮使用 Entry a 属性。有什么帮助吗？

【参考方案1】：

您可以使用CSS3 :not pseudo-class selector 重写第一条规则

.Entry a:not(.button) color:black;text-decoration:underline

这将满足您的需求，但 IE 9 之前的版本不支持它。

真正的跨浏览器解决方案涉及更多：您需要“撤消”.Entry a 在.button 规则中应用的属性。例如：

.Entry a color:black;text-decoration:underline

.button color:white;text-decoration:none;background:black

更新：我忘记了一些非常重要的事情。

如果你确实走“撤消”路线，则需要确保“撤消”选择器的specificity 至少等于第一个选择器的specificity。我建议阅读链接页面（不长）以掌握这个概念；在这种特定情况下，要实现这一点，您必须编写 a.button 而不是简单的 .button。

【讨论】：

我很喜欢，不知道这个选择器，我猜它是 CSS3？

@Nuxy：是的，CSS3。添加了 W3C wiki 的链接。

谢谢乔恩。这正是我一直在寻找的。非常感谢。

虽然你的:not() 方法在这个阶段听起来很合理，但迟早你需要定义被.Entry a 覆盖的新样式。最终，您将陷入维护噩梦，其中包含非常长的 :not() 子句。 真正的问题是选择器的特殊性，而这正是您需要解决的问题。

@MattiasBuelens：我明白你的意思，但恕我直言，将来完全有可能不会出现这样的问题，因为我们正在谈论一个非专业人士对 WP 主题进行一些调整.如果 CSS3 支持不是问题，我认为:not 是一个非常实用的解决方案。

【参考方案2】：

为避免在使用.button 选择器时应用.Entry a CSS 样式，您应该使用.button 选择器覆盖.Entry a 中定义的所有属性

例如：

.Entry acolor:black;text-decoration:underline;

.button color:white;text-decoration:none;background:black;color:white And some other Styling;

【参考方案3】：

这是因为.Entry a 的特异性高于.button。结果是您的元素从.button 接收其实际的background 属性，但其color 和text-decoration 属性来自.Entry a。

有几种方法可以“解决”这个问题：

增加.button 选择器的特异性。

例如，如果您只在a 标记上使用.button，您可以将选择器更改为a.button。这个新的选择器将具有与.Entry a 相同的特异性（一个标签值和一个类值），因此“获胜者”由源顺序决定。如果 a.button 在 CSS 文件中出现在 .Entry a 之后，则 a.button 占上风。

降低.Entry a 选择器的特异性。

您真的只需要在.Entry 元素中定位a 标记吗？您可以简单地将其作为所有a 标签的基本样式吗？如果可以，您只需将.Entry a 更改为a。这个新选择器只有一个标签值，比.button 中的一个类值更不具体。

在.button 上定义额外的选择器。

例如，您可以使用.button, a.button，以便第二个选择器接管第一个选择器失败的位置。请注意，当您在使用其他标签（例如 input 或 button 标签时）遇到同样的问题时，这可能会变得非常混乱。

使用!important。

永远不要这样做，因为如果你尝试创建一个需要覆盖一些.big-button 类，你会遇到麻烦.button 样式。

如果您想了解有关特异性的更多信息，请参阅good article，了解它是什么以及如何计算。

【参考方案4】：

在 CSS3 中你可以这样做：

.Entry a:not(.button)

这将限制您的 .Entry a 规则影响带有 .button 的任何元素。

如果 CSS3 不是一个选项（即您需要支持 IE .Entry a 的不需要的边框结束，请在您的 .button 规则中覆盖它，例如

.button  border: none; /* more button styles */ 

【讨论】：

这实际上不起作用，因为.Entry a 仍然比.button 更具体。我做了一个fiddle，你自己看看。

小提琴做得很好。同意，具体情况需要改变。第一个选项是最好的——我只是提到如果 CSS3 不是一个选项，则需要覆盖样式。

【参考方案5】：

您可以覆盖.button 类中定义在.Entry a 中的任何样式

例如如果你不希望你的文字被下划线，你可以使用text-decoration: none

.Entry a
    color: black;
    text-decoration: underline;


a.button 
    background: black;
    color: white;
    text-decoration: none;
    /*And some other Styling*/

在你的css中不要在大括号;之后使用分号。只需使用大括号关闭

【讨论】：

感谢您的回答 :) 是的，我错误地在大括号后使用了分号。

这实际上不起作用，因为.Entry a 仍然比.button 更具体。我做了一个fiddle，你自己看看。

已编辑：对，您必须使用a.button。抱歉，我错过了添加 a :)。 jsfiddle.net/dYVva

【参考方案6】：

最简单的方法是“撤消”您的元素从.Entry a 的样式继承的特定样式。例如，要撤消文本装饰样式，您可以使用text-decoration:none。

如果您只需要它适用于较新的浏览器，那么您可以使用@Jon 提到的 not() 选择器。