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