鱼C论坛

 找回密码
 立即注册
查看: 2984|回复: 5

[已解决]a:visited 选择器属性无法正常显示

[复制链接]
发表于 2018-8-23 22:41:26 | 显示全部楼层 |阅读模式
10鱼币
本帖最后由 上帝也幽默 于 2018-8-23 23:34 编辑

经过反复测试,在a的伪类样式visited里似乎只有color属性能起作用?
我使用的是chrome浏览器,测试代码如下:

<!DOCTYPE html>
<html lang='en'>
        <head>
                <meta charset="UTF-8">
                <title>问题求助</title>
                <base target='_blank'>
                <style type='text/css'>
                        a{
                                font-size: 30px;
                        }
                        a:visited{
                                color: #FF8800;
                                font-size: 100px;
                                text-decoration: none;
                        }
                </style>
        </head>
        <body>
                <a href='http://fishc.com.cn/thread-82535-1-1.html' >测试</a>
        </body>
</html>

点击过后,font-size属性和text-decoration属性都不会生效,这是为什么?

注:a其他样式link、hover、active都能正常工作
最佳答案
2018-8-23 22:41:27
本帖最后由 不二如是 于 2018-8-31 13:10 编辑

1、论坛发代码,无法直接解析HTML,如果需要格式上好看,请用代码编辑:
Snip20180824_81.png


方便别人复制你的代码:
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>问题求助</title>
  6.                 <base target='_blank'>
  7.                 <style type='text/css'>
  8.                         a{
  9.                                 font-size: 30px;
  10.                         }
  11.                         a:visited{
  12.                                 color: #FF8800;
  13.                                 font-size: 100px;
  14.                                 text-decoration: none;
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.                 <a href='http://fishc.com.cn/thread-82535-1-1.html' >测试</a>
  20.         </body>
  21. </html>
复制代码


2、你问了一个很棒的问题哦~

3、:visited 选择器用于选取已被访问的链接。

由于你没有使用link其他的几个伪类所以不是优先级权重的问题。
(link--visited--hover-active顺序不能颠倒)

为什么颜色生效,而字体大小没有生效呢?

虽然伪类自身有一定缺陷,但这个肯定不是bug

先来看官方的说明:
Snip20180824_82.png


如果看懂上面说的,就是:visited支持如下属性:
color、background-color、border-color、border-{bottom,left,right,top}-color、outline-color、column-rule-color


这是出于安全/隐私原因而做的,不太可能很快改变。

如果鱼油真的必须实现这个,请使用一些Javascript来明确设置访问过的标签的大小。

最佳答案

查看完整内容

1、论坛发代码,无法直接解析HTML,如果需要格式上好看,请用代码编辑: 方便别人复制你的代码: 2、你问了一个很棒的问题哦~ 3、:visited 选择器用于选取已被访问的链接。 由于你没有使用link其他的几个伪类所以不是优先级权重的问题。 (link--visited--hover-active顺序不能颠倒) 为什么颜色生效,而字体大小没有生效呢? 虽然伪类自身有一定缺陷,但这个肯定不是bug。 先来看官方的说明: 如 ...
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2018-8-23 22:41:27 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2018-8-31 13:10 编辑

1、论坛发代码,无法直接解析HTML,如果需要格式上好看,请用代码编辑:
Snip20180824_81.png


方便别人复制你的代码:
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>问题求助</title>
  6.                 <base target='_blank'>
  7.                 <style type='text/css'>
  8.                         a{
  9.                                 font-size: 30px;
  10.                         }
  11.                         a:visited{
  12.                                 color: #FF8800;
  13.                                 font-size: 100px;
  14.                                 text-decoration: none;
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.                 <a href='http://fishc.com.cn/thread-82535-1-1.html' >测试</a>
  20.         </body>
  21. </html>
复制代码


2、你问了一个很棒的问题哦~

3、:visited 选择器用于选取已被访问的链接。

由于你没有使用link其他的几个伪类所以不是优先级权重的问题。
(link--visited--hover-active顺序不能颠倒)

为什么颜色生效,而字体大小没有生效呢?

虽然伪类自身有一定缺陷,但这个肯定不是bug

先来看官方的说明:
Snip20180824_82.png


如果看懂上面说的,就是:visited支持如下属性:
color、background-color、border-color、border-{bottom,left,right,top}-color、outline-color、column-rule-color


这是出于安全/隐私原因而做的,不太可能很快改变。

如果鱼油真的必须实现这个,请使用一些Javascript来明确设置访问过的标签的大小。

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-8-23 22:44:28 | 显示全部楼层
论坛发帖时的HTML代码编辑器怎么用不了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-8-24 10:45:00 | 显示全部楼层
不二如是 发表于 2018-8-24 10:05
1、论坛发代码,无法直接解析HTML,如果需要格式上好看,请用代码编辑:

懂了,原来大家都是这样
感谢不二的解答
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2018-8-24 10:46:06 | 显示全部楼层
测试
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>问题求助</title>
  6.                 <base target='_blank'>
  7.                 <style type='text/css'>
  8.                         a{
  9.                                 font-size: 30px;
  10.                         }
  11.                         a:visited{
  12.                                 color: #FF8800;
  13.                                 font-size: 100px;
  14.                                 text-decoration: none;
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.                 <a href='http://fishc.com.cn/thread-82535-1-1.html' >测试</a>
  20.         </body>
  21. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-27 17:03:57 | 显示全部楼层
很棒
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 17:15

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表