单个元素上的CSS类

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

.Entry a{color: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”的情况下，链接将跟随条目a属性。但是当我使用class时，它会显示混合了Entry a和class按钮样式的按钮。我不希望按钮使用条目a属性。有任何帮助吗？

有关避免

的信息。当您使用选择器
时，请输入a
CSS样式。按钮
应使用选择器
覆盖。按钮
中定义的所有属性。输入a

例如：

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

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

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

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

您可以使用as重写第一条规则

这将满足您的需要，但早于9的IE版本不支持它

真正的跨浏览器解决方案更为复杂：您需要“撤消”应用于
规则中的
条目A
的属性。例如：

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

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

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

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

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

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

。条目a:不是（.button）

这将限制您的
.Entry
规则不影响使用
.button
的任何元素

如果CSS3不是一个选项（即，您需要支持IE），最简单的方法是“撤消”元素从
的样式继承的特定样式。输入a
。例如，要撤消文本装饰样式，可以使用
文本装饰：无

如果您只需要在较新的浏览器上使用它，那么您可以使用@Jon提到的not（）选择器。
您可以覆盖
.button
类中定义的
中的任何样式。输入a

例如，如果您不希望文本带有下划线，可以使用
文本装饰：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
具有更高的特异性。结果是元素从
.button
接收其实际的
背景
属性，但它的
颜色de>和
文本装饰
属性来自
。条目a

有几种方法可以“修复”此问题：


增加
.button
选择器的特异性。
例如，如果您仅在
a
标签上使用
.button
，您可以将选择器更改为
a.button
。此新选择器将具有与
相同的特异性。输入a
（一个标签值和一个类别值），因此“获胜者”由源顺序决定。如果CSS文件中
a.button
位于
.Entry a
之后，则
a.button
占上风
降低
.Entry a
选择器的特异性。
您真的需要只针对
.Entry
元素中的
a
标记吗？您能简单地将其作为所有
a
标记的基本样式吗？如果可以，您可以简单地将
.Entry a
更改为
a
。这是一个新的选择tor只有一个标记值，比
按钮中的一个类值具体

在
.button

上定义额外的选择器。例如，您可以使用
.button、a.button
，以便第二个选择器在第一个选择器出现故障时接管。请注意，当您在其他标记（如
输入
或
按钮
标记）上遇到同样的问题时，这可能会变得非常混乱

使用
！important
千万不要这样做，因为如果你试图创建一个
.big button
类，它需要覆盖一些
.button
样式，你会遇到麻烦

如果你想了解更多关于特异性的信息，这里有一个关于它是什么以及它是如何计算的。
我喜欢它，不知道这个选择器，我想它是CSS3？@Nuxy:是的，CSS3。添加了一个到W3C wiki的链接。谢谢Jon。这正是我想要的。非常感谢。尽管你的
：not（）
方法在这个阶段听起来很合理，迟早你会需要定义新的样式，这些样式会被
覆盖。条目a
。最终，你会陷入一场维护噩梦，时间长得离谱
：not（）
子句。真正的问题是选择器的特殊性，而这正是你需要解决的问题。@MattiasBuelens：我明白你的意思，但我想，将来完全可能不会有这样的问题，因为我们谈论的是一个非专业人士对WP主题进行一些调整。如果CSS3支持不是一个好主意问题我考虑<代码>：不是这里是一个很好的实用解决方案。谢谢你的回答：是的，我错误地使用了括号之后的分号。这实际上不起作用，如<代码>。条目A < /C> >比<代码>更具体。按钮< /代码>。我做了一个，你自己看。编辑：对，你必须使用
a.button
。很抱歉，我没有添加a:）。这实际上不起作用，因为
。条目a
仍然比
按钮更具体。我做了一个，你自己看看。做得很好。特异性需要改变，阿格雷