css中伪类和伪元素的区别
来源:互联网 发布:模糊图像边缘检测算法 编辑:程序博客网 时间:2024/04/29 21:04
伪类用于向某些选择器添加特殊的效果。
伪元素用于将特殊的效果添加到某些选择器。
伪类有::first-child ,:link:,vistited,:hover,:active,:focus,:lang
伪元素有::first-line,:first-letter,:before,:after
使用伪类:
1
2
3
4
5
6
7
<
style
>
p>i:first-child {color: red}
</
style
>
<
p
>
<
i
>first</
i
>
<
i
>second</
i
>
</
p
>
如果我们不使用伪类,而希望达到上述效果,可以这样做:
不使用伪类:
1
2
3
4
5
6
7
<
style
>
.first-child {color: red}
</
style
>
<
p
>
<
i
class
=
"first-child"
>first</
i
>
<
i
>second</
i
>
</
p
>
即我们给第一个子元素添加一个类,然后定义这个类的样式。
使用为元素:
1
2
3
4
<
style
>
p:first-letter {color: red}
</
style
>
<
p
>I am stephen lee.</
p
>
那么如果我们不使用伪元素,要达到上述效果,应该怎么做呢?
不使用为元素:
1
2
3
4
<
style
>
.first-letter {color: red}
</
style
>
<
p
><
span
class
=
'first-letter'
>I</
span
> am stephen lee.</
p
>
即我们给第一个字母添加一个 span,然后给 span 增加样式。
两者的区别已经出来了。那就是:
伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到,这也是为什么他们一个称为伪类,一个称为伪元素的原因。
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
1
2
:Pseudo-classes //伪类
::Pseudo-elements //伪元素
但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
0 0
- CSS中伪类和伪元素的区别
- CSS中伪类和伪元素的区别
- css中伪类和伪元素的区别
- css中伪类和伪元素的区别
- CSS中伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- css伪类和伪元素的区别
- CSS伪类和伪元素的本质区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性:伪类和伪元素的区别
- css-伪类和伪元素的区别
- CSS 属性 - 伪类和伪元素的区别
- git忽略对已入库文件的修改
- mi输入法添加
- Caffe 网络参数 网络模型
- go 语言 gc 问题
- Java JDBC批处理插入数据操作
- css中伪类和伪元素的区别
- 字符串按照要求对字符个数进行处理
- c++ 堆内存和栈内存的使用
- 哈尔滨理工大学软件学院ACM程序设计全国邀请赛 C Coin
- 分离式编译
- 第十二周汉诺塔
- K均值(K-means)算法原理及Spark MLlib调用实例(Scala/Java/python)
- 使用HtmlUnit实现自动打卡
- 云计算