文本装饰不适用于访问状态链接 [英] text-decoration not working for visited state link
问题描述
我是 CSS 的新手，并试图了解链接如何因状态更改而被修改.在我的场景中，当链接处于 visited 状态时，我想将 text-decoration 更改为 line-through.但是，无论是 Mozilla 还是 Chrome 浏览器，text-decoration 的文本内容都没有用 line-through 更新当链接处于已访问状态时，如下所示.我哪里做错了?
请通知当链接状态更改为 visited 时颜色更新(为绿色)而 text-decoration 保持不变(参见.Demo #1);
注意:Mozilla 有一个关于同一问题的错误报告:Mozilla Bug #645786 和错误报告.tag.class:state selector (a.:visited) 的问题也会重现(参见 Demo #2)
演示 #1
<头><风格>一条链接 {红色;文字装饰:无；}一个:访问过{颜色:绿色；文字装饰:线通过；}一个:悬停{颜色:蓝色；}一个:主动{颜色:黄色；}</风格><身体><p><b><a href="http://google.com" target="_blank">这是一个链接</a></b></p></html>Demo #2 --Selector with Class
<头><风格>a.linkClass:link {红色;文字装饰:无；}a.linkClass:visited {颜色:绿色；文字装饰:线通过；}a.linkClass:悬停{颜色:蓝色；}a.linkClass:active {颜色:黄色；}</风格><身体><p><b><a class="linkClass" href="http://google.com" target="_blank">这是一个链接</a></b></p></html>访问链接的样式有限制；
<块引用>访问链接样式的限制
您仍然可以在视觉上对访问过的链接进行样式设置，但是有现在限制了您可以使用的样式.只有以下属性可以应用于访问过的链接:
颜色背景颜色边框颜色(及其子属性)轮廓颜色填充和描边属性的颜色部分隐私和 :visited 选择器由于用户隐私问题，不允许使用
text-decoration 样式.
I'm new on CSS and trying to understand how links are modified due to the changed state. On my scenario, I want to change the text-decoration to the line-through when the link is on visited state. However, neither on Mozilla nor Chrome browser, text-decoration of the text content not updated with line-through when the link is on visited state, shown as below. Where did I go wrong?
Please notify that the color is updated (to green) when the link state changed to visited while the text-decoration stays the same (see. Demo #1);
Note: There is a bug report for the Mozilla about the same issue: Mozilla Bug #645786 and on the bug report. Problem also reproduce for the tag.class:state selector (a.:visited) (see Demo #2)
Demo #1
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: line-through;
}
a:hover {
color: blue;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<p>
<b>
<a href="http://google.com" target="_blank">This is a link</a>
</b>
</p>
</body>
</html>
Demo #2 --Selector With Class
<!DOCTYPE html>
<html>
<head>
<style>
a.linkClass:link {
color: red;
text-decoration: none;
}
a.linkClass:visited {
color: green;
text-decoration: line-through;
}
a.linkClass:hover {
color: blue;
}
a.linkClass:active {
color: yellow;
}
</style>
</head>
<body>
<p>
<b>
<a class="linkClass" href="http://google.com" target="_blank">This is a link</a>
</b>
</p>
</body>
</html>
There is a limitation for styling the visited links;
Limits to visited link styles
You will still be able to visually style visited links, but there are now limits on what styles you can use. Only the following properties can be applied to visited links:
color background-color border-color (and its sub-properties) outline-color The color parts of the fill and stroke properties
Privacy and the :visited selector
text-decoration styling is not permitted due to the user's privacy issues.
这篇关于文本装饰不适用于访问状态链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
