Question

我有这个

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2> <a name="first"> First part</a> </h2>
<h2> <a name="second"> A second part </a> </h2>

加上这个

a:hover {color: orange}

如何将其设置为<h2>标签（最后2个）在我将鼠标悬停在其上时不会改变颜色？因为那里我仍然需要锚标签。

Answer 1

一个选项是:not()伪类排除<h2> 父元素：

:not(h2) > a:hover { color: orange; }

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2> <a name="first"> First part</a> </h2>
<h2> <a name="second"> A second part </a> </h2>

>是直接后代（子）组合子。

<强> 8.2. Child combinators

儿童组合者描述了两者之间的童年关系   元素。儿童组合器由“大于号”组成   （U + 003E，＆gt;）字符并分隔两个简单选择器序列。

值得注意的是:not()伪级is supported in IE 9和更新。

`name`

上的<a>属性

您应该注意HTML5中的name属性is obsolete。您可以使用id对元素进行make it a bookmark。

因此，你可以摆脱造成麻烦的多余<a>元素。

a:hover { color: orange; }

<a href="http://www.lipsum.com/" target="_blank"> LIPSUM </a>
<h1> <a href="#first"> Chapter 1 </a> </h1>
<h1> <a href="#second"> Chapter 2 </a> </h1>
<h2 id="first">First part</h2>
<h2 id="second">A second part</h2>

或者，如果出于任何原因，您希望坚持使用当前标记，对于IE 8及更早版本等旧版Web浏览器，您可以覆盖声明：

h2 > a:hover { color: blue; }

或仅定位<a>的{{1}}元素;即只选择链接。

href

a[href]:hover { color: orange; }

Answer 2

实际上，通过提供的HTML，您可以在此处遵循许多模式。取决于你的情况。

仅适用于h1

的锚点

h1 a:hover {color: orange; }

仅适用于不从h2下降的锚点

:not(h2) a:hover {color: orange; }

仅适用于前2 h个后代的锚点，而不是最后2个

:nth-child(4n+2) a:hover {color: orange; }

仅适用于name而不是href

的锚点

a[name]:hover {color: orange; }

可能性是无穷无尽的。

Answer 3

您可以将h2的颜色应用为重要颜色。对于前者h2 {color：＃000！important}

仅将样式应用于定义链接的锚点

3 个答案:

`name`