其核心就是用来选择那些不能够被普通选择器选择的文档之外的元素,比如:hover。
其核心就是需要创建通常不存在于文档中的元素,比如::before。
CSS2 中伪类、伪元素都是以单冒号:
表示,CSS2.1 后规定伪类用单冒号表示,伪元素用双冒号::
表示,浏览器同样接受 CSS2 时代已经存在的伪元素(:before, :after, :first-line, :first-letter 等)的单冒号写法。对于 CSS2 之后所有新增的伪元素(如::selection),应该采用双冒号的写法。但是因为兼容性问题,大部分还是用的单冒号。
伪类即假的类,通常可以添加类来达到效果,伪元素即假元素,需要通过添加元素才能达到效果。来看下面的例子
例 1:将一行字符串的首字母变成红色
现在不用伪元素应该如何实现?用 CSS slector 选择?想了一晚上也没想出来,既然没法选择也就没法添加一个类来改变首字母的颜色。
<p>I am snow</p>
添加元素试试,如下,创建一个元素 span 将首字母包裹起来,进而改变其颜色,成功了。这里,关键点在于我们创建了新的元素达到了::first-letter
的作用,且不能通过添加其他类来实现这一效果,因此将::first-letter
叫做伪元素而不是伪类。
<p><span style={{ color: red }}>I<span/> am snow</p>
例 2: 如下要将 I am snow 这句话变为红色
很简单用:first-child
,同样添加一个类试试,显然很容易达到同样效果,我们并没有创建新的元素只是添加了一个类.red-line
,因此将:first-child
叫做伪类而不是伪元素,尽管它和::first-letter
在语义上十分相似。
div:first-child {
color: red;
}
或
.red-line {
color: red;
}
<div class='red-line'>
<p>I am snow</p>
<div>
:
和双冒号::
来表示。关于常用的伪类与伪元素选择器可以查看CSS选择器一文。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。