响应式设计-谈谈伪类和伪元素

啥是伪类？啥是伪元素，我想还是从我们熟悉的东西开始吧！可能我们最初接触伪类和伪元素应该是从 a （链接标签）开始的，我们通过 :link, :visited, :hover, :active,通过这些伪类，我们就改变了那些链接的文字颜色，也就是说我们改变了被选择元素的某些状态。

关于伪类的定义，我从 MDN 看到的描述是这样的：

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

如果我去断章取义加谷歌翻译的理解的结果是：
伪类是一组关键字，可以定义被选择元素的特殊状态。比如 :hover 将会定义当用户的鼠标悬浮到被定义选择器的样式。
伪类和伪元素，让我们不仅可以定义文档树中的元素，也能让我们扩展到这些方面之外的东西，比如我们的访问记录（如 :visted），内容的状态（如某些表单元素的 :checked），或者鼠标的位置（如 :hover 让我们知道我们的鼠标是否在某个元素上面）。

下面是琳琅满目的伪类选择器，有些我们很熟悉，有些似曾相识，但是更多的可能是路人甲，附上链接地址给各位看官，方便大家了解。

从上面，我们可以说伪类就是给我们标示状态的，我们为什么称其为伪类呢？波塞冬（pseudo）的字面意思是冒充的、假的，也就是这些东西并不是真正的类，我们定义是他的状态。

但是我们的伪类还有 :after, :before我们一直使用的，这些东西虽然没有给文档树增加节点，但是他们确实增加了内容，这样咱们做到的不仅仅是标示了状态，我们还增加了内容，所以我们有提出了伪元素的概念。下面给大家看看 MDN 的描述吧！

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

都有哪些伪元素选择器呢？

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection

我们看到在语法上面，伪元素和伪类最明显的区别是多了一个冒号，但是我们用 :  :: 获得的结果是一样的，为毛？

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

::selection always starts with double colons (::).

我们可以看到，两个冒号是在css3中为了让我们区分开来伪类和伪元素。That’s all,吓我们一跳。

故事到这个地方还没有完，既然伪元素是 css3 中的东西，那它的兼容性咋样呢？答案如下：

就是这样，如果你现在也在忙于响应式，那么你就要关注了，因为你要为IE8及以下的用户负责，要不然你的产出物可能要闯祸，你要负责，因为这些东西上流淌着你的血液。所以我们如果能用伪类的话，就先别用伪类选择器了，这可能是最直接的解决方案了。

但是两个冒号 :: 带来的麻烦不仅仅是在 IE8 及以下的浏览器上不解析，如果你像下面这么写 css 样式，那你要注意了，因为你的 css 在 IE8 上没有被解析。


.a,
.b::after{color:#f00}


我们可能认为即使IE8不解析伪元素，.a 的样式也能解析，但结果是 .a 在 IE8 及以下也不生效了。因此在群组选择器中是用伪元素要注意了。

转载请注明出处： 响应式设计-谈谈伪类和伪元素