Question

您好我的博客上有一些CSS问题。我的Wordpress主题在CSS文件中有一个帖子样式部分，它有一个“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”，则链接将跟随Entry属性。但是当我使用它时，它会显示带有Entry a和class按钮样式混合的按钮。我不希望按钮使用Entry属性。有什么帮助吗？

Answer 1

您可以使用CSS3 :not pseudo-class selector作为

重写第一条规则

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

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

真正的跨浏览器解决方案更为复杂：您需要“撤消”.Entry a规则中.button适用的属性。例如：

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

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

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

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

Answer 2

为了避免在使用选择器.Entry a时应用.button CSS样式，您应该使用选择器.button覆盖.Entry a

例如：

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

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

Answer 3

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

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

提高.button选择器的特异性。
例如，如果您只在.button标签上使用a，则可以更改选择器a.button。这个新选择器具有与.Entry a（一个标签值和一个类值）相同的特异性，因此“获胜者”由源顺序决定。如果a.button位于CSS文件中的.Entry a后面，a.button会占据优势。
降低.Entry a选择器的特异性。
您真的需要仅定位a元素内的.Entry个标签吗？您是否可以简单地将其作为所有a标签的基本样式？如果可以，您只需将.Entry a更改为a即可。这个新选择器只有一个标记值，它不像.button中的一个类值那样具体。
在.button上定义额外的选择器。
例如，您可以使用.button, a.button，以便第二个选择器接管第一个选择器失败的位置。请注意，当您遇到与input或button标记等其他标记相同的问题时，这可能会非常混乱。
~~使用!important。~~
从不这样做，因为如果你试图制作一个{{1}，你会遇到麻烦需要覆盖一些.big-button样式的类。

如果您想了解更多有关特异性的信息，请参阅good article，了解它的含义以及计算方法。

Answer 4

在CSS3中你可以做到这一点：

.Entry a:not(.button)

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

如果CSS3不是一个选项（即你需要支持IE＆lt; = 8），你需要覆盖任何无意中继承的样式。因此，例如，如果您的按钮最终带有来自.Entry a的不需要的边框，请在.button规则中覆盖此内容，例如

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

Answer 5

您可以覆盖.button

中定义的.Entry a类中的任何样式

E.g。如果您不希望文字加下划线，可以使用text-decoration: none

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

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

在css中使用大括号};后也不要使用分号。只需使用大括号即可关闭}

Answer 6

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

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

单个元素上的CSS类

6 个答案: