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

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, >) 字符并分隔两个简单选择器序列。

值得注意的是: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 和更早版本），您可以或者覆盖声明：

h2 > a:hover { color: blue; }

或仅针对具有href 的<a> 元素； IE。只选择链接。

a[href]: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>

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}