:target selector：<!DOCTYPE html>
<html>
<head>
<style>
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
</body>
</html>
当您点击引用其他元素的a nchor时，它会使用相应的p为id设置样式。
如何设置href在悬停时指向页面的内容？
答案 0 :(得分：5)
因为CSS选择器只能从早期元素遍历到兄弟姐妹的后代兄弟，后代或后代（并且不能选择父元素或先前兄弟元素），所以这不能用CSS完成。将<a>悬停在后面:target - ed元素的样式时，首先需要从悬停的<a>元素遍历父级。
要使用JavaScript执行此操作，我建议：
// a named function to toggle the highlighting of the
// targeted element:
function highlightTarget(event) {
// the 'event' is passed automagically from the
// addEventListener() method; as is the 'this'
// which is the element to which the event-handler
// (this function) was bound:
// using getAttribute() to get the value of the attribute,
// instead of 'this.href' which would get the absolute URL,
// replacing the leading '#' character with an empty string:
var id = this.getAttribute('href').replace(/^#/, ''),
// getting the element with that id:
target = document.getElementById(id);
switch (event.type) {
// if this is the mouseenter event we add the 'highlight'
// class-name:
case 'mouseenter':
target.classList.add('highlight');
break;
// on 'mouseleave' we remove the class-name:
case 'mouseleave':
target.classList.remove('highlight');
break;
}
}
// iterating over the NodeList returned by
// document.getElementsByTagName(), using
// Array.prototype.forEach():
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(a) {
// if the href attribute (not property) begins with a '#':
if (a.getAttribute('href').indexOf('#') === 0) {
// we bind the highlightTarget function to handle
// both the 'mouseenter' and 'mouseleave' events:
a.addEventListener('mouseenter', highlightTarget);
a.addEventListener('mouseleave', highlightTarget);
}
});.highlight {
background-color: red;
}<h1>This is a heading</h1>
<p><a href="#news1">Jump to New content 1</a>
</p>
<p><a href="#news2">Jump to New content 2</a>
</p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b>
</p>
<p id="news2"><b>New content 2...</b>
</p>
<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :target selector.</p>
值得注意的是，第4级CSS选择器模块有一个建议的解决方案，即参考组合器，以解决这个问题：
以下示例在焦点或悬停时突出显示一个元素：
label:matches(:hover, :focus) /for/ input, /* association by "for" attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px;
}
这表明正确的语法（目前当然不起作用）可能是：
a:matches(:hover) /href/ p {
background-color: red;
}
参考文献：
答案 1 :(得分：2)
对于信息：
在CSS中，如果链接位于目标或目标的父级之前且与之相邻，那么您可以执行类似的操作：
JsonObject[href="#news1"]:hover ~#news1,
[href="#news2"]:hover ~#news2{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
要进一步了解，请参阅：http://www.w3.org/TR/css3-selectors/#attribute-representation 并注意到这些：http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators＆amp; http://www.w3.org/TR/css3-selectors/#general-sibling-combinators