欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css中的伪类和伪元素_html/css_WEB-ITnose

程序员文章站 2022-03-16 18:41:58
...
伪类

伪类与类相似,但又没有类附加标签上。伪类分为UI伪类和结构化伪类。

UI伪类

  • :link(将样式添加到未被访问的链接上)

  • :visted(将样式已添加到访问的链接上)

  • :hover(将样式添加到鼠标悬浮的元素上)

  • :active(将样式添加到被激活的元素上)

  • :focus(将样式添加到被选中的元素上)

结构化伪类

  • :first-child(将样式添加到第一个子元素上)

  • :last-child(将样式添加到最后一个子元素上)

伪元素

伪元素是在文档中若有实无的元素。

主要有以下几种

  • :first-letter(将样式添加到第一个字母)

  • :first-line(将样式添加到第一行)

  • :before(在某些元素前面插入某些内容)

  • :after(在某些元素后面插入某些内容)

看到:after,大家脑子里应该都能浮现出那个清除浮动的CSS的吧。没错,就是这个。

?

1

2

3

4

5

6

7

.clearfix:after {

content : "." ;

display : block ;

height : 0 ;

visibility : hidden ;

clear : both ;

}


区别

仔细琢磨下它们的定义。

伪类的实现就好比给这个标签添加了一个虚拟的类。

举个栗子:

?

1

2

3

4

5

a:hover{

font-size : 20px ;

color : red

}

Hello,World

若不用伪类,实现同样的效果,需要这么做

?

1

2

3

4

5

.hover{

font-size : 20px ;

color : red

}

Hello,World

这么一对比,”伪类“就顾名思义了啊。


而伪元素则好比添加了一个新的标签。

?

1

2

3

4

5

p:first-letter{

font-size : 20px ;

color : red

}

Hello,World

若不用伪元素,实现同样的效果,需要这么做

?

1

2

3

4

5

.first-letter{

font-size : 20px ;

color : red

}

Hello,World


因此总结下区分的方法:现实相同效果是需要添加一个类还是一个元素标签


tips:

1.CSS3为了区别伪类和伪元素,明确使用单冒号来表示伪类,双冒号来表示伪元素。但为兼容性考虑,目前基本还是使用单冒号来表示。

2.搜索引擎不会搜索伪元素的信息。因此,不要通过伪元素添加你想让搜索引擎索引的重要内容




参考资料:

《CSS设计指南》

详解 CSS 属性 - 伪类和伪元素的区别


http://www.jb51.net/css/67317.html