CSS—通过伪类控制链接表现


  • 链接
    <a href="#"></a>//#代表空链接

a标签是内联元素,如果两个内联元素之间出现了空格或者换行,那个勿乱出现多少次,内联元素中间会多出一个字符的间距。
浏览器默认字符的样式是长这个样子的:

点击前,点击后

  • 伪类
    —定义:用于向某些选择器,添加特殊的效果。(源自w3C)
    —使用方法:元素:伪类名称{属性值} ,eg:a:hover{ color:red}//当鼠标经过时字体变为红色。

  • :link 向未被访问的链接添加样式。

  • :visited 向已被访问的链接添加样式。(不明白为什么text-decoration不显示,其他三个伪类都可以,)

  • :hover 当鼠标悬浮在元素上时,添加的样式。

  • :active 当鼠标按下元素,按住了时,向元素添加的样式。
    以上四种各个浏览器都兼容。

  • :focus 向拥有键盘输入焦点的元素添加样式(IE6、7不支持)

  • :first-child 向某个元素的第一个子元素添加样式(IE6、7、8不支持)

  • 还有几个伪类,见用的不多,见过再了解。:first,:left,:right,:lang。

  • 通过伪类控制链接的属性
    <style>
    a:link{
    text-decoration: none;
    color: black;
    }
    a:visited{
    text-decoration: line-through;//???
    color: red;
    }
    a:hover{
    text-decoration: underline;
    color: blue;
    }
    a:active{
    text-decoration: none;
    color: white;
    }

      </style>
      <body>
           <a href="#">测试</a>
      </body>
    

—注意这四个伪类的顺序是有考究的,按照我的例子的顺序来写。为什么呢?

CSS特性
1、继承:元素中子元素将继承父元素的样式。
2、层叠:网页中子元素定义了与父元素相同的属性,则子元素的样式将覆盖父元素的样式。而且,同一个元素,后面定义的样式会覆盖前面定义的样式。

分析:通过对上面特性的理解,可以分析一下上面四个伪类的动作。
a:visited,鼠标按住了这一动作,可以包含以上三种伪类的情况。理解一下,这个链接被按住了,但是,他也可能是未访问过的,也可能是访问过的,我鼠标按啦,也是在链接上。但是,我只想让他显示a:visited里面的样式,所以必须放在最后。同理去理解:hover

  • 不支持伪类怎么破
    我们不是有javascript么,:focus可以通过使用
    document.getElementById('d').onfocus=function(){
    this.className=blue;
    }//前提:id已经标识过,类.blue已将建过。这个类内描述了获得焦点时的样式。
欢迎补充与指正☺
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,771评论 0 1
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 12,124评论 1 62
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,574评论 0 40
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,706评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,776评论 32 459

友情链接更多精彩内容