3

您好，我在博客上遇到了一些 CSS 问题。我的 Wordpress 主题在 CSS 文件中有一个帖子样式部分，其中有一个“条目”类，其中为文章区域内的链接定义了“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 a 属性。但是当我使用 class 时，它会显示混合了 Entry a 和 class 按钮样式的按钮。我不希望按钮使用 Entry a 属性。有什么帮助吗？

4

6 回答 6

5

您可以使用CSS3:not伪类选择器将第一条规则重写为

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

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

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

于 2012-08-07T10:17:09.790 回答
2

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

例如：

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

.button {color:white;text-decoration:none;background:black;color:white And some other Styling};
于 2012-08-07T10:16:50.743 回答
2

发生这种情况是因为.Entry a具有比 更高的特异性.button。结果是您的元素从 接收其实际background属性，.button但其color和text-decoration属性来自.Entry a。

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

  • 增加.button选择器的特异性。
    例如，如果您只.button在a标签上使用，您可以将选择器更改为a.button. 这个新的选择器将具有与（一个标签值和一个类值）相同的特异性.Entry a，因此“获胜者”由源顺序决定。如果a.button出现.Entry a在 CSS 文件中，a.button则占上风。
  • 降低.Entry a选择器的特异性。
    你真的只需要定位元素a内的标签.Entry吗？您可以简单地将其作为所有a标签的基本样式吗？如果可以，您可以简单地更改.Entry a为a. 这个新的选择器只有一个标签值，它比.button.
  • 在 上定义额外的选择器.button。
    例如，您可以使用.button, a.button第二个选择器接管第一个选择器失败的位置。请注意，当您遇到与其他标签（例如input或button标签）相同的问题时，这可能会变得非常混乱。
  • 使用!important.
    永远不要这样做，因为如果你试图创建一个.big-button需要覆盖某些.button样式的类，你会遇到麻烦。

如果您想了解有关特异性的更多信息，这里有一篇关于它是什么以及如何计算的好文章。

于 2012-08-07T10:29:17.300 回答
1

那么在 CSS3 中你可以这样做：

.Entry a:not(.button)

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

如果 CSS3 不是一个选项（即您需要支持 IE <= 8），您将需要覆盖任何无意中被继承的样式。因此，例如，如果您的按钮以来自 的不需要的边框结束，.Entry a请在您的规则中覆盖它.button，例如

.button { border: none; /* more button styles */ }
于 2012-08-07T10:18:01.693 回答
1

您可以覆盖.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 中的大括号后使用分号。只需使用大括号关闭}

于 2012-08-07T10:19:26.753 回答
0

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

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

于 2012-08-07T10:18:53.390 回答