您现在的位置是：网站首页> 编程资料编程资料

详解CSS中的伪类与伪元素及二者间的区别

2021-09-05 1052人已围观

简介 这篇文章主要介绍了详解CSS中的伪类与伪元素及二者间的区别,实际上CSS3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下

CSS伪类的概念及作用
CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。
CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。
1.link用在为访问的连接上。
2.visited用在已经访问过的连接上。
3.hover用于鼠标光标置于其上的连接。
4.active用于获得焦点(比如，被点击)的连接上。
例如：

CSS Code复制内容到剪贴板
  1. ExampleSourceCode   
  2. a:link{     
  3. color:red     
  4. }     
  5. a:visited{     
  6. color:green     
  7. }     
  8. a:hover{     
  9. color:blue     
  10. }     
  11. a:active{     
  12. color:orange     
  13. }    

注意：
尽管CSS给予你绕开的控制权，用不同的颜色表示已经访问过的连接是一个很好的习惯，因为很多用户还是这样预期的。CSS伪类(除了hover)不常用，恐怕也没有过去常用。因此，它没有过去那样有用了。但如果你能收集用户的意见，你会发现应该使用它。
传统上，连接文本是蓝色的，已访问的连接是紫色的。也许，这是最有效、最有用的颜色。然而，伴随着CSS的广泛发展，这种颜色不会是平常的了，用户也不再假设连接必须是蓝色或紫色的。
你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是，InternetExplore并不支持。这真是一个极大的烦恼。


伪元素
实际上来说，CSS 中的伪元素在HTML上是不存在的，使用的时机通常都是针对某样元素特殊处理时才会用到
常用的 pseudo-element：
::first-line
可以指定 p 元素第一行的样式
::first-letter
可以指定 p 元素第一个字的样式
::selection
定义使用者反白后的效果
::before
在元素之前插入内容
::after
在元素之后插入内容
范例 HTML

XML/HTML Code复制内容到剪贴板
  1. <p>  
  2.     臣亮言，先帝

上一篇：CSS3的first-child选择器实战攻略浅析CSS实现水平垂直同时居中的5种思路CSS3近阶段篇之酷炫的3D旋转透视 图解CSS中position属性的定位用法使用CSS的position属性控制页面布局的入门教程解析CSS编写中的属性优先级问题详解CSS中的伪类与伪元素及二者间的区别css 各浏览器下的背景色渐变【代码】css文件中的样式类被覆盖，js文件中的变量未定义问题CSS实现文字环绕图片效果stylus css 框架使用方法深入解析

下一篇：解析CSS编写中的属性优先级问题详解CSS中的选择器优先级顺序详解CSS中的选择器优先级及样式层叠问题解决CSS z-index 层级关系优先级的概念CSS中的各种选择器与样式优先级小结四种CSS常用的选择器使用方法和注意事项css优先级计算方法(推荐)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网