文本修饰不适用于访问状态链接 [英] text-decoration not working for visited state link

查看:95
本文介绍了文本修饰不适用于访问状态链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 CSS 中的新成员,并试图了解链接是如何由于状态更改而被修改的。在我的方案中,我想在链接打开时将文本修饰更改为直通 >访问状态。但是,在 Mozilla Chrome 浏览器中,文本修饰未被<$ c $更新当链接处于访问状态时,如下图所示: line-through 我哪里做错了? 装饰保持不变(参见示例#1);

注意:Mozilla有一个关于相同问题的错误报告:一个href =https://bugzilla.mozilla.org/show_bug.cgi?id=645786 =nofollow> Mozilla Bug#645786 和bug报告。问题也会复制到 tag.class:state 选择器(a.:visited)(请参阅 Demo#2

演示#1





<!c $ c><!DOCTYPE html>< html>> < HEAD> <风格> a.linkClass:link {color:red;文字修饰:无; } a.linkClass:visited {color:green;文字装饰:直通; } a.linkClass:hover {color:blue; } a.linkClass:active {color:yellow; }< / style> < /头> <身体GT; < p为H. < b取代; < a class =linkClasshref =http://google.comtarget =_ blank>这是一个连结< / a> < / B个< / p为H. < / body>< / html>

解决方案

对访问的链接样式有限制


限制访问的链接样式



您仍然可以在视觉上对访问过的链接进行样式设定,但现在有
限制您可以使用的样式。

  color 
background-color $ b $只有以下属性
可以应用到访问过的链接b border-color(及其子属性)
outline-color
填充和描边属性的颜色部分


隐私和:访问选择器



文字装饰样式是不允许的,因为用户的隐私问题。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆