CSS的伪类和伪元素

下面的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浏览器的话，还是使用单冒号的写法比较安全。