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

2014-11-16 本文已影响184人 Miss____Du

链接
<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已将建过。这个类内描述了获得焦点时的样式。

欢迎补充与指正☺

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

猜你喜欢

热点阅读