如何在html'name'属性上使用'target'css psuedo-class

Question

我正在尝试使用“：target”CSS类来突出显示基于点击链接的html部分，其中包含一个锚片段（例如：C：\ Desktop \ Test.html #link）。我的文档中正在修改的区域具有“名称”标识属性。目标伪类对我来说是“id”属性，但是“name”有问题。感谢。

PS：我使用“name”的原因是因为我正在编写关于直接从MS Word转换的HTML文档的VBA脚本。 （Word使用“名称”将书签转换为链接）

示例代码我尝试过：

a:target {
          color: red;
}

a[name = test]:target {
           color: red;
}

Answer 1

第一个CSS仅用于样式化（内容外观，布局等等），使用js可以轻松更新内容（查看示例）

  

CSS描述了如何在屏幕，纸张或其他媒体上显示HTML元素。

     

第二

如果您只是想检查<a>元素是否具有name属性，请使用a[name]（我的示例中的第二个链接）

如果您需要部分匹配a[name*=test]，则会选择包含test的任何名称。 （我的例子中的第3个链接）

var alltest = document.getElementsByName('test');

alltest.forEach(function(test) {
  test.setAttribute('href', '#newlink');
  test.innerHTML = 'updated link';
});

a[name] {
  color: green;
}

a[name*=test] {
  color: red;
}

<a href="google.com">google.com</a><br>
<a name="alsowork" href="google.com">google.com</a><br>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>
<a name="test" href="google.com">google.com</a>