文档章节

css中的伪类和伪元素

sunshinewyf
 sunshinewyf
发布于 2015/10/13 20:36
字数 599
阅读 72
收藏 5

伪类

伪类与类相似,但又没有类附加标签上。伪类分为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
}
<a href= "#" >Hello,World</a>

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

?

1
2
3
4
5
.hover{
     font-size : 20px ;
     color : red
}
<a href= "#"  class= "hover" >Hello,World</a>

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


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

?

1
2
3
4
5
p:first-letter{
     font-size : 20px ;
     color : red
}
<p>Hello,World</p>

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

?

1
2
3
4
5
.first-letter{
     font-size : 20px ;
     color : red
}
<p><span class= "first-letter" >H</span>ello,World</p>


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


tips:

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

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




参考资料:

《CSS设计指南》

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


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

本文转载自:http://my.oschina.net/sevenhdu/blog/383160?p=1

sunshinewyf
粉丝 17
博文 97
码字总数 64205
作品 0
武汉
程序员
私信 提问
CSS 选择器[下]

伪类选择器总汇 结构性伪类选择器 UI伪类选择器 动态伪类选择器 其他伪类选择器 一、伪类选择器汇总 伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器。 二、结构性伪...

xiaoxiaobukuang
2017/10/23
0
0
伪类&伪元素 - CSS精通之路

# 前言:   你的代码中是否每个标签都定义了一个类?完成一个页面后是否觉得代码很乱很拥挤?看见github优秀代码清爽简洁,想过你真的精通 ‘CSS’ 吗?想要进阶?不妨捡起CSS最容易被新手忽...

果汁凉茶丶
2018/01/12
0
0
CSS伪类与伪元素完全指南

本文转载自:众成翻译 译者:为之漫笔 链接:http://www.zcfy.cc/article/239 原文:https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-eleme......

极乐君
2017/01/18
0
0
CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} anchor伪类 ...

wybo521
2016/01/17
4
0
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
112
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部