悬停在父元素上不影响标记标签CSS

Question

如何将父容器（如div或anchor）的hover样式应用于mark标签？我知道这对嵌套在父元素中的其他元素（如span）是默认行为。但是，当我使用mark标签时，它不起作用。

以下是三个示例，1）带有mark的div，2）带有mark的anchor，3）带有span的anchor。如果您悬停在子元素外的父元素上，则会更改span，但不会更改mark。

<div>
  Outside div <mark>inside mark</mark>
</div>

<a>
  Outside anchor <mark>inside mark</mark>
</a>
<br>
<a>
  Outside anchor <span>inside span</span>
</a>

https://jsfiddle.net/ku6drqt5/

我希望知道mark标签有什么特殊之处，导致无法正常工作，以及我应该如何纠正它。否则，简单的解决方法也可以。

注意：我使用的是Chrome v48浏览器。

- kevinrstone

Answer 1

似乎必须在“mark”元素上特别设置颜色，因为它不能直接继承。根据Joseph的评论，“mark”元素的默认浏览器/用户代理“color”设为黑色。就像默认背景色是黄色一样*。*这似乎是Chrome、Firefox和IE约定的默认值，尽管我找不到任何要求这种情况发生的内容。因此，当更改父:hover颜色时，用户代理样式仍然更具体。span没有设置颜色，因此它会继承在父:hover上指定的颜色。一个解决方法。

.parent:hover {
  color: red;
}
.parent:hover mark {
  color: currentColor; /* or inherit as noted in the other answer */
}

<div class="parent">
  Outside div
  <mark>inside mark</mark>
</div>

<a class="parent">
  Outside anchor <mark>inside mark</mark>
</a>
<br>
<a class="parent">
  Outside anchor <span>inside span</span>
</a>

根据你的需求，你可能想将这个添加到你的CSS重置中。

mark {
  color:inherit;
}

JSfiddle

- Paulie_D

---

我认为这是因为用户代理样式表中<mark>定义了颜色。因此，当您更改父元素:hover的颜色时，用户代理样式表仍然更具体。<span>在用户代理CSS中没有设置颜色，因此它会继承在父元素:hover上指定的颜色。 - Joey M-H

@Joseph 非常感谢...我正在寻找一个权威的参考资料，但你的解释在这段时间内是很好的。 - Paulie_D

我的假设绝不是最终定论 :-) 如果有人想知道，可以在这里找到基于Webkit的浏览器的最新用户代理样式表：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css，其中指定了<mark>元素的样式。 - Joey M-H

感谢您提供的出色答案和解释。当我意识到用户代理正在将标记设置为黑色时，它终于让我恍然大悟。在我的失败尝试中，我还使用了错误的选择器.parent mark:hover而不是.parent:hover mark。 - kevinrstone

Answer 2

这取决于您的用户代理（浏览器）如何为<mark>元素设置样式。Chrome有以下默认值：

background-color: yellow;
color: black;

最简单的重置方法是将以下内容添加到您的CSS中：

.parent:hover mark {
    background-color: inherit;
    color: inherit;
}

- Thomas Ghesquiere