下面的CSS代码是修改浏览器选中文字的默认样式:
::select {
background-color: #b3d4fc;
text-shadow: none;
}
看到上面的 “::” ,你是否会有一定疑问呢?希望下面的解释可以解答你心中的疑问 ^_^
伪类与伪元素
W3C对于两者的定义:
- CSS伪类用于向某些选择器添加特殊的效果
- CSS伪元素用于将特殊的效果添加到某些选择器
从定义中也可以很容易的看出两个关键词,选择器,特殊效果
下面的图展示了CSS伪类和伪元素(是不是挺面熟的^_^):
可能看到这里你还没有懂,那么请继续往下看,通过Demo弄懂它们。
首先是针对伪元素进行测试的,对于h3标签而言,通过伪元素”first-letter”将“s”设置为红色,而对于下面的h4标签而言,通过添加一个带有样式的span*元素*将“s”设置为绿色的
<h3>sunny day</h3>
<h4><span class="first-letter">s</span>unny day</h4>
h3:first-letter {
color: red;
}
.first-letter {
color: green;
}
效果如下:
下面对伪类进行测试,第一个p标签通过伪类”first-child”设置了字体颜色,而第二个p标签在不利用伪类的情况下,通过添加一个类的方式设置了字体颜色
<div>
<p>lucky dog</p>
<p class="first-child">lucky dog</p>
</div>
div>p:first-child {
color: red;
}
.first-child {
color: green;
}
效果如下:
小结:通过上面的例子也很容易看出来,伪类的效果可以通过添加一个实际的类来达到,而伪元素需要添加一个实际的元素才能达到
到这里你可能已经懂得了伪类和伪元素了,但是疑问还是没有解决,下面就看一看单冒号和双冒号吧
单冒号和双冒号
在CSS2中,对于伪元素和伪类的写法都是通过“ : ”解决的,而在CSS3中,为了区分两者,明确的规定了伪类用一个冒号表示,伪元素用两个冒号表示
当然,如果你的网站只需要兼容webkit、firefox、opera等浏览器,则可以采用伪元素两个冒号的写法,如果需要兼容IE浏览器的话,还是使用单冒号的写法比较安全。