初学入门简单了解学习CSS的伪类

【 tulaoshi.com - Web开发 】

  　类:在HTML中当表现class属性的时候，人们可以用点(.)号来作为~=号的一个替代选择，所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性，所以此类选择符叫类选择符。在CSS中样式通常依附与一个元素在文档树中的位置，这个简单的模型对于许多情况来说是足够的，但是一些常见的版式状态不能应用于文档树的结构。例如，在HTML中，没有元素能够引用一个段落的第一行，所以也没有简单的CSS选择符应用它。所以，CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。

　　第一种：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并不支持。这真是一个极大的烦恼，因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。