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但其colortext-decoration属性来自.Entry a

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

  • 增加.button选择器的特异性。
    例如,如果您只.buttona标签上使用,您可以将选择器更改为a.button. 这个新的选择器将具有与(一个标签值和一个类值)相同的特异性.Entry a,因此“获胜者”由源顺序决定。如果a.button出现.Entry a在 CSS 文件中,a.button则占上风。
  • 降低.Entry a选择器的特异性。
    你真的只需要定位元素a内的标签.Entry吗?您可以简单地将其作为所有a标签的基本样式吗?如果可以,您可以简单地更改.Entry aa. 这个新的选择器只有一个标签值,它比.button.
  • 在 上定义额外的选择器.button
    例如,您可以使用.button, a.button第二个选择器接管第一个选择器失败的位置。请注意,当您遇到与其他标签(例如inputbutton标签)相同的问题时,这可能会变得非常混乱。
  • 使用!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 回答