我需要在我的页面上应用一个**访问过的**样式的特定链接。我试图使用: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
:visited
CSS伪类有一些隐私限制: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);
}
可能读起来有点苛刻,但它工作得很好:-)