Question

此代码旨在用纯JS重新创建jQuery .has()效果。第一个示例可以正常工作：

<script>
NodeList.prototype.has = function(selector) {
  return Array.from(this).filter(e => e.querySelector(selector))
}

document
  .querySelectorAll('.main-container > .analytics:not(#promo)')
  .has('a')
  .forEach(e => e.style.background = 'red')
</script>

<div class="main-container">
  <div class="analytics">
    <a>Should be red</a>
  </div>
  <div class="analytics">
    Should not be red
  </div>
  <div id="promo" class="analytics">
    <a>Should not be red</a>
  </div>
</div>

但是，当我尝试将其与已访问/未访问的链接一起使用时，它不起作用。在这里：

（https://jsfiddle.net/1bqdjfrg/）

<div class="main-container">
  <figure>
    <a href="https://google.com">Foo</a>
  </figure>
  <figure id="promo">
    <a href="https://ndfkjbnfjkbfjkbf.com">Bar</a>
  </figure>
  <figure>
    <a href="https://bfkjbfkjfvbjkfsv.com">Baz</a>
  </figure>
</div>

<script>
NodeList.prototype.has = function(selector) {
  return Array.from(this).filter(e => e.querySelector(selector))
}

document
  .querySelectorAll('.main-container > figure')
  .has('a:link')
  .forEach(e => e.style.backgroundColor = 'blue')

document
  .querySelectorAll('.main-container > figure')
  .has('a:visited')
  .forEach(e => e.style.backgroundColor = 'violet')
</script>

这是什么问题？

Answer 1

根据规范，访问和链接访问已被禁用。

样式表作者可能会滥用：link和：visited   伪类来确定用户访问了哪些网站而没有   用户的同意。
     因此，
UA可能会将所有链接视为未访问的链接，或实施   在呈现访问者时保护用户隐私的其他措施   和未访问的链接有所不同。

由于您无法访问javascript中的：link和：visit，因此您仍然可以在CSS中访问。

.main-container > figure a:visited{
    background-color:blue;
}

用普通的JS重新创建jQuery`has（）`。不适用于访问过的链接

1 个答案: