0

希望这不是一个愚蠢的问题，但我似乎无法弄清楚如何做到这一点。您可以将通配符应用于锚点悬停/焦点，以便将样式应用于所有类吗？

就像是

a:hover * { color: #ff0000; }

说我有

a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...

解释我正在寻找的最简单的方法是拥有一个全局 :hover 样式，但有多个 :link 样式。谢谢

4

3 回答 3

3

有多种方法可以做到这一点。正如其他人所提到的，您可以将相同的样式应用于多个类，如下所示：

div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }

您还可以为要应用的样式创建自定义类：

div a.customClass:hover { ... }

您可以*像问题中提到的那样使用，但将悬停应用于它：

div *:hover { ... }

还有这个选项，您只需为 all 应用样式a，尽管您可能已经知道此选项：

a:hover { ... }

编辑：如果您的样式被其他东西“覆盖”，一种快速简便的检查方法是使用浏览器的开发人员工具来检查元素。:hover您甚至可以使用 Chrome 和 Firefox 随附的开发人员工具应用伪类（即，即使您没有将鼠标悬停在元素上也应用伪类）（您可能需要下载 Firebug 才能使用 Firefox 执行此操作）。

另一种选择是!important用来增加选择器的特异性。例如：

a:hover { background: red !important; }

您可以在此处阅读有关如何计算特异性的更多信息。

于 2012-07-03T19:05:53.080 回答
1

如果您想为特定标签应用全局 css 规则，请编写（对于锚点）：

a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}

如果您想要一个以不同方式设置样式的特殊链接（也许将其设为按钮），只需对其应用一个类并设置该类的样式：

a.customlink{/*your styles go here*/}

编辑：如果您只想在悬停时更改链接的某些属性，这对于两个不同的链接将是相同的（假设一个是黄色的，而另一个是红色的背景，并且您希望它们都具有黑色背景），将另一个相同的类添加到两个链接，并对其进行样式化。

JsFiddle 示例

于 2012-07-03T19:02:28.550 回答
0

你可以用逗号分隔它们，比如a:hover link, a:hover link2, a:hover etc { color: #ff0000; }

a:hover { color: #ff0000; }不做你想做的事吗？

于 2012-07-03T19:00:40.520 回答