14684
23327
我正在尝试使其链接保持为白色,但是当鼠标悬停在链接上时,它们变为灰色并带有下划线,但是该链接不起作用,该链接仍然有效,但仅保持白色,这是我的CSS代码:
a:悬停{
文字装饰:下划线;
颜色:#666666
}
a:访问过{
文字修饰:无;
颜色:#FFFFFF
}
一条链接 {
文字修饰:无;
颜色:#FFFFFF
} 
为了稍微澄清一下icedwater的答案,诸如:hover,:link等伪类都具有与类相同的特异性,更重要的是它们彼此具有相同的特异性。
我和你在一起,我个人认为如果:visited暗含!important是重要的,因为它是一个用户控制的状态,但这会使它变得更加复杂,所以...是的。只需重新安排您的小组-实际上,您需要的顺序与您现在拥有的顺序完全相反。
|
为设置的悬停属性是为正常状态定义的(这意味着它涵盖了已访问和未访问的链接),但是您还定义了a:visited和a:link(并且在:hover之后也提到了它)声明),css解析器将改为赋予这些定义的属性更高的优先级。
解决方法
解决方法#1
通过更改使其更具体:
a:悬停{
文字装饰:下划线;
颜色:#666666
}
至
a:hover,a:visited:hover,a:link:hover {
文字装饰:下划线;
颜色:#666666
}
演示@ http://jsfiddle.net/Wz6aR/
解决方法2
要更改优先级,请将声明顺序更改为:
a:访问过{
文字修饰:无;
颜色:#FFFFFF
}
一条链接 {
文字修饰:无;
颜色:#FFFFFF
}
a:悬停{
文字装饰:下划线;
颜色:#666666
}
示范@ http://jsfiddle.net/9cGPv/
|
您应该像这样订购链接伪类:
一种 {...}
一条链接 {...}
答:访问过{...}
a:焦点{...}
a:悬停{...}
a:主动{...}
|
当CSS级联时,最后一条规则将覆盖之前的规则。如果您将a:link定义进行更一般的修改,它应该可以正常工作。当然,这是最有效的更改。
|
您可以通过检查Chrome devtools中的样式轻松找到此类问题。是你做的吗?
右键单击您担心的元素,然后选择“检查
元件”。
样式标签将打开。在element.style旁边,在右侧,
您会看到三个图标。中间的是一个虚线矩形,带有
小箭头。
单击该按钮,将打开一个窗格。设置:hover状态。请参见下面的屏幕截图。
现在检查正在应用的规则。您会注意到
:hover规则设置的属性被划掉。这表示
他们被掩盖了。您还将看到的属性
您的:link规则就是所应用的规则。这是为什么?因为,
正如其他张贴者所指出的那样,该规则稍后出现在您的CSS中
因此优先。
一个快速的Google鼠标“悬停CSS”将为您提供MDN上的相关页面,它总是一个很好的资源,它在第一段中指出:
:hover CSS伪类在用户使用指针设备指定元素时匹配,但不一定激活它。此样式可以被出现在后续规则中的任何其他与链接相关的伪类(即:link,:visited和:active)覆盖。为了对链接进行适当的样式设置,您需要将:hover规则放在:link和:visited规则之后,但要放在:active规则之前,如LVHA-order::link-:visited-:hover —:active所定义。
SO并不是一个众包的调试论坛。学习为自己调试。
|
你的答案
StackExchange.ifUsing(“ editor”,function(){
StackExchange.using(“ externalEditor”,function(){
StackExchange.using(“ snippets”,function(){
StackExchange.snippets.init();
});
});
},“代码段”);
StackExchange.ready(function(){
var channelOptions = {
标签:“” .split(“”),
id:“ 1”
};
initTagRenderer(“”。split(“”),“” .split(“”),channelOptions);
StackExchange.using(“ externalEditor”,function(){
//如果启用了摘要,则必须在摘要后触发编辑器
如果(StackExchange.settings.snippets.snippetsEnabled){
StackExchange.using(“ snippets”,function(){
createEditor();
});
}
其他{
createEditor();
}
});
函数createEditor(){
StackExchange.prepareEditor({
useStacksEditor:否,
heartbeatType:“答案”,
autoActivateHeartbeat:否,
convertImagesToLinks:是,
noModals:是的,
showLowRepImageUploadWarning:是的,
声望:ToPostImages:10,
bindNavPrevention:正确,
后缀:“”,
imageUploader:{
brandingHtml:“由\ u003ca href = \“ https://imgur.com/ \” \ u003e \ u003csvg class = \“ svg-icon \” width = \“ 50 \” height = \“ 18 \” viewBox = \“ 0 0 50 18 \” fill = \“ none \” xmlns = \“ http://www.w3.org/2000/svg \” \ u003e \ u003cpath d = \“ M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.7256 4.91628 46.0943 5.50789C45.74.6 4.313.6412 4.313.6662 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \“ / \ u003e \ u003cpath d = \” M32.492 10.1419C32.492 12.6954 34.1182 14.048437.0451 14.0484 41.5985 12.6954 41.598510.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8521 35.4954 9.60062V6.59049C35.4662 4.36532 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \“ / \ u003e \ u003cpath fill-rule = \” evenodd \“ clip-rule = \” evenodd \“ d = \” M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30 .8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 28.4555 4.94978 28.1109 5.50789C27.499 4.86533 26.7335 4.56087 25.7005 4.56087C23.1369 4.56087 21.0134 6.57349 21.01347.3985 13。 .5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.7799 28.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23。 93 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6335ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.102432 .9737 11.5116 24.1317 10.6491 24.1317 9.27932Z \“ / \ u003e \ u003cpath d = \” M16.8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.40879 4。 .1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.57809 4.89931 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.5549V11.25962 .54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.371 1 13.8962 12.4044 13.8962C13.4375 13.8962 13.9157 13.2535 13.9157 11.9512V8.90741C13.9157 7.58817 14.3365 6.91179 15.4269 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \“ / \ u003e \ u003cpath d = \” C3.31。 31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 5.28821 0.313354 6.59049V11.9512C0.313354 13.2535 0.791758 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \“ / \ u003e \ u003e \ u003c = 9 C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \“ fill = \”#1BB76E \“ / \\ u003e \ u003c / u003c / u003c / svg \ \ u003c / a \ u003e”,
contentPolicyHtml:“根据\ u003ca href = \“ https://stackoverflow.com/help/licensing \” \ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \“ https://stackoverflow.com获得许可的用户贡献/ legal / content-policy \“ \ u003e(内容策略)\ u003c / a \ u003e”,
allowUrls:是
},
onDemand:是的,
dispatchSelector:“。discard-answer”
,立即显示MarkdownHelp:true,enableTables:true,enableSnippets:true
});
}
});
感谢您为Stack Overflow提供答案!
请务必回答问题。提供详细信息并分享您的研究!
但是要避免...
寻求帮助,澄清或回答其他答案。
根据意见发表声明;用参考或个人经验来备份它们。
要了解更多信息,请参阅有关编写出色答案的提示。
草稿已保存
草稿丢弃
注册或登录
StackExchange.ready(function(){
StackExchange.helpers.onClickDraftSave('#login-link');
});
使用Google注册
使用Facebook注册
使用电子邮件和密码注册
提交
以访客身份发布
名称
电子邮件
必需,但从未显示
StackExchange.ready(
函数(){
StackExchange.openid.initPostLogin('。new-post-login','https%3a%2f%2fstackoverflow.com%2fquestions%2f17461291%2fcss-pseudo-class-hover-rule is not be be be-applyed%23new-答案”,“ question_page”);
}
);
以访客身份发布
名称
电子邮件
必需,但从未显示
发表您的答案
丢弃
点击“发布答案”,即表示您同意我们的服务条款,隐私政策和Cookie政策
不是您要找的答案?浏览标记为css hover的其他问题或询问您自己的问题。