伪类, 伪元素

[super-fool]

伪类: 元素可以在一些外部因素上 或 针对内部元素应用相应的样式, 这些外部因素例如 用户悬停在该元素(:hover), 是否点击过该元素(:active); 针对内部元素例如 元素内部的第一个元素first-child, 最后一个元素last-child, 第n个元素nth-child

伪元素: 创建一些不在dom树中的元素, 比如我通过:before添加了一个元素, 虽然用户可以看到, 但是dom树中不存在该元素, JS也无法获取.

伪元素(::) 是针对其元素上的一些位置(开头before, 尾巴after, 第一个字母first letter, 第一行first line, 被选中的内容 selection)进行

Tips：

1. 伪元素选择器构造的元素是虚拟的，所以不能用 JS 去操作它。
2. 如果同时使用了 before 和 first-letter 两个伪类，第一个字是要从 before 里的内容开始算起的，如果 before里面的内容是一个非文本元素，那 first-letter 也会作用在这个非文本元素上，但是不一定能生效。
3. first-line 和 first-letter 不适用于内联元素，在内联元素中这两个选择器都会失效。
4. 在 CSS3 中，规定了伪类用一个冒号（:）表示，伪元素用两个冒号表示（::）。但除了 selection，其余四个伪元素选择器已经在 CSS2 中存在且和伪类用的是一样的单冒号表示的。为了向下兼容，现在的浏览器中伪元素选择器用单冒号和双冒号都可以。在没有兼容问题的情况下，还是建议大家按着新的 CSS3 标准来开发。

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

[super-fool]

很有意思的一个demo:

// CSS
.text1 {
width: 100px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}

.text2 {
width: 100px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}

.text1:hover ~ .text2 {
  background-color: red
}

当我鼠标悬停到text1, text2会改变背景颜色为red