初学入门简单了解学习CSS的伪类
第一种:selector:pseudo-class {property: value} 也可以用HTML的class属性来设定伪类。
例句:
以下是引用片段:
a:link {color:red}
第二种:selector.class:pseudo-class {property: value} 伪类是最常用的伪类。
例句:
以下是引用片段:
a.c1:link {color:red}
锚(a)伪类
CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。锚(a)伪类是最常用的伪类。例句如下:
以下是引用片段:
a:link {color: #FF0000} /* 未被访问的链接 红色 */
a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
也可以用HTML的class属性来设定伪类。例句如下:
以下是引用片段:
a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
例句:actived的顺序书写。
注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。
注意
尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。
传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。
还应注意
你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。