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

啥是伪类?啥是伪元素,我想还是从我们熟悉的东西开始吧!可能我们最初接触伪类和伪元素应该是从 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.

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

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

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 中的东西,那它的兼容性咋样呢?答案如下:

Browser Lowest Version Support of
Internet Explorer 8.0 :pseudo-element
9.0 :pseudo-element ::pseudo-element
Firefox (Gecko) 1.0 (1.0) :pseudo-element
1.0 (1.5) :pseudo-element ::pseudo-element
Opera 4.0 :pseudo-element
7.0 :pseudo-element ::pseudo-element
Safari (WebKit) 1.0 (85) :pseudo-element ::pseudo-element

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

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


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

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

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