白话CSS-伪类和伪元素的特性和区别

白话CSS-伪类和伪元素的特性和区别

首先咱们来看一看官方的w3c对于两者的定义：

• css伪类用于向某些选择器添加特殊的效果。
• css伪元素用于将某些特殊的效果添加到某些选择器

excuse me？当我语文没学好？这两句话除了语序换了一下有任何区别嘛？这里不得不说当个程序员的同时也要学好英语了，咱们再来看一看官方的英文解释。

伪类：

“The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.”

“A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class and optionally by a value between parentheses.”

“Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element.

“Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.”

简单翻译一下：

• 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
• 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
• 任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

附上伪类种类列表：

再来看看伪元素的英文解释：

“seudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).”

“A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.”

“This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.”

“Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.”

同样的简单翻译一下：

• 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
• 伪元素的由两个冒号::开头，然后是伪元素的名称。
• 使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。
• 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
• 注：不排除未来会加入同时使用多个伪元素的机制。

附上伪元素种类列表：

英语大牛看完肯定就已经理解了，但是我们这群英语渣渣可如何是好？没事咱们来看几个栗子：

运用伪类：first-child

p>i:first-child {color: red}
<p>
    <i>first</i>//使用伪类将颜色样式添加到第一个子元素
    <i>second</i>
</p>

不使用伪类实现：

.first-child {color: red}
<p>
    <i class="first-child">first</i>//使用class选择器添加样式
    <i>second</i>
</p>

再来看看伪元素，使用伪元素：first-letter

p:first-letter {color: red}
<p>I am stephen lee.</p>//为首字母I添加了颜色样式

不使用伪元素实现：

.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>//使用class选择器添加样式

总结

怎么样，两者的区别一目了然了吧。

用大白话来说就是：伪类的效果需要通过添加一个实际的类来达到，比如“我的第一个孩子”、“激活之后的我”、“获得关注的我”等等，而伪元素的效果则是需要通过添加一个实际的元素才能够实现，比如“我的第一个字母”、“我的第一行”等等，这也是为什么一个叫做伪类，而另一个叫做伪元素。

又或者我们可以这么说：

比如文中举的 first-child 和 first-letter 的例子，细想起来，其实为了实现 first-letter 的效果，实际上也相当于伪造了一个元素，将首字母放到该元素中，然后再添加样式实现效果，而 first-child 就相当于直接给自己的第一个子元素添加样式，并不需要伪造一个新的元素。

再或者我们可以这么说：

first-child的作用就像是一个类名，它只是把你想要的元素区分出来，那些元素本身就存在；而first-line则表现得像是“新建了一个元素”一样，以这样的形式去寻找你想要的内容。所以，一个“像类”（伪类），一个“像元素”（伪元素）。

---

这回搞懂了不？再搞不懂那可能就真的去好好学学语文了：)