CSS：覆盖活动链接样式？答案

【问题标题】：css: override active link style?CSS：覆盖活动链接样式？
【发布时间】：2015-11-26 10:33:32
【问题描述】：

我的 css 中有以下选择器：

a:active {
  position: relative;
  top: 1px;
}

所以每个链接在按下时都有这个小按钮效果。

如何防止特定链接出现这种行为？

例如我的网站上有一个不应该有这种行为的“返回顶部”链接。

a#back-to-top {
    position:fixed;
    right:0px;
    bottom:20px;
    width:20px;
    height:20px;
    background:green;
}

在这种情况下，“回到顶部”开始跳转。但是，如果我尝试重置它，它就不起作用了。

a#back-to-top:active  {
    position:fixed !important;
    bottom:20px !important;
}

知道我做错了什么或如何从该活动行为中排除特定链接吗？

【问题讨论】：

标签： css

【解决方案1】：

也尝试重置top 属性。

a#back-to-top:active  {
    position: fixed !important;
    top: auto !important;
}

【讨论】：

【解决方案2】：

以下

a#back-to-top:active {
  position:fixed;
  top: auto;
}

会修复它，因为它更具体并且会被应用，它会覆盖使您的按钮移动的部分..

不需要!important 指令，因为该规则具有更高的特异性并且会被应用..

【讨论】：

【解决方案3】：

我认为你应该“重置”顶部声明

a#back-to-top:active  {
    position:fixed;
    bottom:20px;
    top: auto;
}

此外，仅当由于某种原因 a#back-to-top:active 样式声明位于 a:active 声明之前，才使用 !important。

【讨论】：