CSS伪元素及其用法
Opened this issue · 0 comments
CSS中有两个很常见的概念，伪类和伪元素。
伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。
（
:active | 向被激活的元素添加样式。
:focus | 向拥有键盘输入焦点的元素添加样式。
:hover | 当鼠标悬浮在元素上方时，向元素添加样式。
:link | 向未被访问的链接添加样式。
:visited | 向已被访问的链接添加样式。
:first-child | 向元素的第一个子元素添加样式。
:lang | 向带有指定 lang 属性的元素添加样式。
）
伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。
最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的DOM节点。
此外 ，伪类是使用单冒号:，伪元素使用是双冒号::。
伪元素可以分为排版伪元素、突出显示伪元素、树中伪元素三类。下面我们一起看看具体都有哪些吧。
第一类：排版伪元素
- ::first-line伪元素
它表示所属源元素的第一格式化行。可以定义这一行的样式。
效果如图所示。
p::first-line {
text-transform: uppercase; //定义仅有大写字母。
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam ipsum sunt doloribus accusamus quae atque quaerat quam deleniti beatae, ipsam nobis dignissimos fugiat reiciendis error deserunt. Odio, eligendi placeat.</p>
1.1 如何确定第一格式化行
需要注意的是，::first-line伪元素只有应用在块级容器上才有效，且必须出现在相同流中的块级子孙元素中（即没有定位和浮动）。
1.2 可以用于::first-line伪元素的样式
还有一些其他限制。主要有以下样式可以应用于其上：
所有的字体属性
color和opacity属性
所有的背景属性
可以应用于行级元素的排版属性
文字装饰属性
可以用于行级元素的行布局属性
其他一些规范中特别指定可以应用的属性
此外，浏览器厂商有可能额外应用其他属性。
2. ::first-letter伪元素
::first-letter伪元素代表所属源元素的第一格式化行的第一个排版字符单元，且其前面不能有任何其他内容。
::first-letter常用于下沉首字母效果。
如下，我们可以创建一个下沉两行的段落。第一种方法，是CSS-INLINE-3中引入的，浏览器尚不支持。我们可以通过第二种方法实现同样的效果。
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos hic vero reprehenderit sunt temporibus?
Doloribus consequatur quo illo porro quae recusandae autem eos. Corrupti itaque alias nam eius animi illum.</p>
<!-- initial-letter(尚不支持) -->
p::first-letter { initial-letter: 2; }
<!-- 普通实现 -->
h3 + p::first-letter {
float: left;
display: inline-block;
font-size: 32px;
padding: 10px 15px;
}
2.1 如何确定首字母
首字母必须出现在第一格式化行内。
2.2 可以用于::first-letter伪元素的样式
::first-line生成的伪元素的行为类似于一个行级元素，还有一些其他限制。主要有以下样式可以应用于其上：
所有的字体属性
color和opacity属性
所有的背景属性
可以应用于行级元素的排版属性
文字装饰属性
可以用于行级元素的行布局属性
margin和padding属性
border和box-shadow
其他一些规范中特别指定可以应用的属性
同样，浏览器厂商有可能额外应用其他属性。
第二类：突出显示伪元素
突出显示伪元素表示文档中特定状态的部分，通常采用不同的样式展示该状态。如页面内容的选中。
突出显示伪元素不需要在元素树中有体现，并且可以任意跨越元素边界而不考虑其嵌套结构。
突出显示伪元素主要有以下几类：
1 ::selection与::inactive-selection
这两个伪元素表示用户在文档中选取的内容。::selection表示有效的选择，相反，::inactive-selection表示无效的选择（如当窗口无效，无法相应选中事件时）
如下图所示，我们可以定义页面中选中内容的样式，输入框中的内容也可以。
2 ::spelling-error
::spelling-error表示浏览器识别为拼写错误的文本部分。暂无实现。
3 ::grammar-error
::grammar-error表示浏览器识别为语法错误的文本部分。暂无实现。
::spelling-error和::grammar-error暂时均无实现。一方面，不同的语言的语法与拼写较为复杂。另一方面，::spelling-error和::grammar-error还可能会导致用户隐私的泄露，如用户名和地址等。所以浏览器实现必须避免读取这类突出显示内容的样式。
可以应用到突出显示类伪元素的样式
对于突出显示类伪元素，我们只可以应用不影响布局的属性。如下：
color
background-color
cursor
caret-color
caret-color
text-decoration及其相关属性
text-shadow
stroke-color/fill-color/stroke-width
第三类：树中伪元素
这类伪元素会一直存在于元素树中，它们汇集成源元素的任何属性。
- 内容生成伪元素：::before/::after
当::before/::after伪元素的content属性不为'none'时，这两类伪元素就会生成一个元素，作为源元素的子元素，可以和DOM树中的元素一样定义样式。
::before是在源元素的实际内容前添加伪元素。::after是在源元素的实际内容后添加伪元素。
正如上文提到的，与常规的元素一样，::before和::after两个伪元素可以包含::first-line和::first-letter。
- 列表项标记伪元素：::marker
::markder可以用于定义列表项标记的样式。
如下，我们可以分开定义列表项及其内容的颜色。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
li{
color: red;
}
li::marker {
color:green;
}
- 输入框占位伪元素：::placeholder
::placeholder表示输入框内占位提示文字。可以定义其样式。
如：
::placeholder {
color: blue;
}
所有可以应用到::first-line伪元素的样式都可以用于::placeholder上。可以参考上面的内容。
注意还有一个:placeholder-shown伪类，它主要用于定义显示了占位文字的元元素本身的样式，而不是占位文字的样式。
总结
本文列举了CSS Pseudo-Elements Module Level 4中的所有伪元素类型。
首先，详细介绍了排版类伪元素，这一类大家的使用场景较多，支持度也较好。
其次，介绍了突出显示类伪元素，主要可以用于选中样式的修改，其他的尚未得到支持。
最后，介绍了树中伪元素，包括::before/::after/::marker/::placeholder