[英]Style the parent element of an anchor tag if it's visited
I've been using HTML for a long time and never really had to do/tried something like this. 我已经使用HTML很长一段时间了,从来没有真正做过这样的事情。 I have an anchor tag inside a paragraph tag , like so:
我在段落标记中有一个锚 标记 ,如下所示:
<p>Hello <a href="path/page.html">World</a></p>
I was wondering if there is a way to change the style the p
element if a
has already been visited, using nothing but CSS. 我在想,如果有改变风格的方式
p
元素,如果a
已经被访问过,只是用普通的CSS。 I know JavaScript can do this and by any means feel free to post a Vanilla JS answer if you will for reference, but my question really is about how to do it using just CSS. 我知道JavaScript可以做到这一点,如果你愿意参考,可以随意发布一个Vanilla JS答案,但我的问题实际上是关于如何使用CSS来做到这一点。
Since I predict someone will say something like "Is the parent tag really necessary?" 因为我预测有人会说“父母标签真的有必要吗?” , I know HTML5 and CSS3 brought whole new ways to style and manipulate content without the need for extra tags, but that's not the point of the question.
,我知道HTML5和CSS3为样式和操作内容带来了全新的方式,而不需要额外的标签,但这不是问题的关键。 The point is of how to do it if one ever needs to (and in my case, I do) .
重点是如果有人需要(在我的情况下,我这样做)如何做到这一点 。
There are a couple of issues at play here. 这里有几个问题在起作用。
Initially I suggested looking at using the ::before
selector to try to achieve something, but after a little digging I came across this article (and this answer from SO) which might make for an interested read. 最初,我建议使用
::before
选择器来尝试实现某些功能,但经过一番挖掘后,我遇到了这篇文章 (以及SO的答案) ,这可能会引起感兴趣的阅读。
See this JSFiddle ( updated to native JS ) for my workings. 请参阅此JSFiddle ( 更新 为本机JS )以了解我的工作原理。 It's worth noting I did try the native JavaScript check as mentioned in the above answer, as well as using the
:visited
selector in jQuery, but neither worked. 值得注意的是,我确实尝试了上面回答中提到的本机JavaScript检查,以及在jQuery中使用
:visited
选择器,但都没有工作。
JS JS
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i ++) {
var anchor = anchors[i];
console.log(document.defaultView.getComputedStyle(anchor, null).getPropertyValue('color'));
}
HTML HTML
<p>
<a href="http://google.com">Google</a>
</p>
<p>
<a href="http://nowayjose.com">Never visited</a>
</p>
CSS CSS
a { color: #00FF00; }
a:visited { color: #FF0000; }
The potential security implications of how the !
如何潜在的安全隐患
!
selector in CSS4 would play out with :visited
rules are pretty interesting, given that you could style a different element and then potentially query that element for a style. CSS4中的选择器会发挥作用
:visited
规则非常有趣,因为您可以设置不同的元素,然后可能会查询该元素的样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.