css类和a：悬停

Question

我需要分配css，让“Dusty Arlia”不要强调。

    <p>
        <span class="published">
            By: <a href="http://whiterootmedia.com">Dusty Arlia</a><br />
            Published on December 19, 2011<br />
            Updated on January 26, 2012
        </span>
    </p>

我尝试使用CSS

    span.published a:hover {text-decoration:none;}

但这不起作用，所以我试过

    .published a:hover {text-decoration:none;}

......等等。 CSS位于外部样式表中。我已将这些CSS行放在样式表的底部和顶部（我认为它位于最后呈现的CSS页面的底部）。无论如何，“已发布”类没有CSS，但我确实有CSS来强调我的超链接。我希望我的名字的超链接没有下划线。我无法编辑我的HTML。我有这个布局的数百页。我知道如果我必须编辑html，我可以做一个“替换所有”功能，但我想要一个CSS修复。

Answer 1

如果您认为css声明被另一个样式表覆盖，您可以尝试在其末尾说!important，这将覆盖其他样式（如果它本身还没有!important }）

span.published a:hover {text-decoration:none !important;}

Answer 2

除非某些其他通用选择器正在重新定义，否则您的css应该按照定义工作。试试这个：

span.published a:hover {text-decoration:none !important;}

Answer 3

听起来你有一些CSS优先于你要添加的位。如果您有Chrome，则可以使用开发人员工具查看影响特定元素的所有规则（右键单击 - ＆gt;检查元素，查看“匹配的CSS规则”）。您可以在Firefox中使用Firebug。这应该为您提供解决问题所需的洞察力。

当其他所有方法都失败时，!important可能会有用。

Answer 4

我认为问题是，你的a：悬停规则没有应用，因为你的另一个选择器有更多的权重（特殊性），因此会覆盖你的a：hover选择器。

Eric Meyer有一篇关于该主题的精彩文章：http://meyerweb.com/eric/css/link-specificity.html

首先，请确保您的a：选择器具有以下建议顺序：

1. A：link
2. A：已访问
3. A：悬停
4. A：活性

为了记住这个顺序，我总是使用LoVe / HAte助记符。

顺便说一句，：hover伪类仅适用于处于悬停状态的链接（即鼠标结束）。您是否还为：链接或？

指定了无下划线规则

如果没有任何帮助，您也可以尝试！important指令。然而，这根本不是必需的，但它可以帮助您找出故障所在。