如何在a:访问的选择器上应用非选择器?

  • 本文关键字:选择器 应用 访问 html css
  • 更新时间 :
  • 英文 :


我需要在我的页面上应用一个**访问过的**样式的特定链接。我试图使用:not选择器来避免一些以btn开头的类。

下面是我的CSS:
a:visited :not(class^='btn'){
color: var(--main-grey);
}

当然,如果我在这里,那是因为它根本不工作:-)

页面建立在简单的HTML/CSS/JS上,没有花哨的代码可以拯救我!

非常感谢您的参与,帮助我解决这个问题:-)马特

您使用了选择器:

a:visited :not(class^='btn')

但是这应该是class属性的正确选择器:

a:visited:not([class^='btn'])

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

:visitedCSS伪类有一些隐私限制

:https://developer.mozilla.org/en-US/docs/Web/CSS/访问

出于隐私原因,浏览器严格限制您可以使用的样式使用这个伪类应用,以及如何使用它们:

允许的CSS属性为color, background-color, border-color,Border-bottom-color, border-left-color, border-right-color,Border-top-color, column-rule-color, outline-color,

允许的SVG属性为填充和描边。

允许样式的alpha组件将被忽略。阿尔法元素的non- visited状态的组件将被替换。在Firefox中当alpha组件为0时,样式设置为:visited将

虽然这些样式可以改变外观的颜色到最后用户,窗口。getComputedStyle方法将驻留并始终返回未访问的颜色值

元素永远不会被:visited匹配。

我引用它是为了完成,但你已经只是对颜色进行了样式化,所以它没有受到任何限制。

下面是一个演示,该规则将正确地为第一个锚元素(没有任何以btn开头的类)设置红色样式。当然,如果您需要强制:visited状态,如果您没有首先访问该链接,您可能只是在开发人员工具上标记其状态。

a{
font-size: 2rem;
}
a:visited:not([class^='btn']){
color: red;
}
<a href="http://google.com">Google</a>
<br>
<a href="http://google.com" class="btn-">2ndLink</a>

感谢为这个解决方案做出贡献的每个人。这是我最后的代码:

a:visited:not([class^='btn']):not([class^='sitemap-element']):not([class*='nav-link']){
color: var(--main-grey);
}

可能读起来有点苛刻,但它工作得很好:-)

最新更新