为访问过的链接的父元素设置样式

Question

我似乎理解privacy-restrictions of visited links，但我无法理解为什么我的代码无法正常运行。

可在此处测试：https://jsfiddle.net/xqLvyrnb/

<style>
    div { padding: 1em; }
    .inner { background-color: greenyellow; }
    .outer { background-color: yellow; }

    a:link { color: rgb(0, 138, 206); }
    a:visited { color: rgb(180, 0, 180); }
</style>

<div class="outer">
    <div class="inner">
        <a href="https://gooooooooogle.com">Probably unvisited link</a>
    </div>
</div>

<div class="outer">
    <div class="inner">
        <a href="https://stackoverflow.com">Probably visited link</a>
    </div>
</div>

<script>
    // Uncomment one of these 2 lines:
    //var target_elements = document.querySelectorAll('.inner a:link');    // Works
    //var target_elements = document.querySelectorAll('.inner a:visited'); // Doesn't work!
    for (i = 0; i < target_elements.length; i++) {
        target_elements[i].parentNode.parentNode.style.backgroundColor = 'gray';
    }
</script>

为什么这对我来说很奇怪？因为我们没有为a:visited使用样式。我们使用样式作为父元素（并且它不起作用）。如何解决？