关灯
开启左侧

a标签:visited伪类font-size等一些样式无效

[复制链接]
doubleyong 发表于 2019-2-16 09:52:05 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
a标签有四个伪类,分别是 a:link 未点击,a:visited已点击,a:hover 悬停,a:active 已激活;
在使用这四个伪类时一定要注意顺序,否则不会生效。
如下代码:visited伪类中颜色属性已经生效了,但是font-size属性却不生效,。而其它伪类中的font-size属性却可以生效。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <style type="text/css">
  8.     *{
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.   /* 未点击*/
  13.     a:link{
  14.         color:black;
  15.         font-size:10px;
  16.     }
  17.   /* 已点击*/
  18.     a:visited{
  19.         color:orange;
  20.         font-size: 28px;
  21.     }
  22.   /* 悬停*/
  23.     a:hover{
  24.         color:red;
  25.         font-weight: bold;
  26.         font-size: 48px;
  27.     }
  28.   /* 激活*/
  29.     a:active{
  30.         color:orange;
  31.         font-size:38px;
  32.     }
  33. </style>
  34. <body>
  35. <a href="http://baidu.com" target="_blank">baidu.com</a>
  36. <a href="http://bugshouji.com" target="_blank">baidu.com</a>
  37. </body>
  38. </html>
复制代码
问:为会a标签的visited的伪类font-size等一些属性不生效呢?然后,又试了一下font-weight,line-height等属性,发现都不生效。然后,查阅了一下文档,才发现。

原因: 出于隐私考虑,浏览器严格限制可以使用该伪类选择(即visited)的元素应用的样式:仅颜色、背景色、边框颜色、边框底端颜色、边框左端颜色、边框右端颜色、边框顶面颜色、轮廓颜色等等,即color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color


并且,虽然颜色可以更改,但getComputedStyle方法获取样式将有误,不能根据伪类状态来显示对应的样式,而是始终返回未访问颜色的值。

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.For more information on the limitations and the motivation for them, see Privacy and the :visited selector.
来源:https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

参考:https://stackoverflow.com/questions/38550677/how-to-change-the-font-size-of-an-a-tag-after-its-been-visited?r=SearchResults
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )