10个 你可能不熟悉的 css伪类 及其用例介绍

lxf2023-02-16 15:30:53

10个 你可能不熟悉的 css伪类 及其用例介绍

css 伪类用于向某些选择器添加特殊效果,是动态的,是指当前元素的状态或特征。当一个元素达到特定状态时,它可能会得到一种伪类型的风格;当状态发生变化时,它就会失去这种风格。

本文在一定程度上鼓励您在构建UI时使用更简单的CSS和更少的CSS JS。熟悉 CSS 所提供的一切都是实现这一目标的一种方法,另一种方法是实现最佳实践,并尽可能多地重用代码

接下来,我想介绍一些你可能不熟悉的伪类及其用例,希望对你以后有所帮助。

::first-line | 选择文本的第一行

::first-line 伪元素应用于某一元素的第一行。第一行的长度取决于许多因素,包括元素宽度、文档宽度和文本大小。

::first-line 假元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption它是有用的。在其他类型中,::first-line 它不起作用。

用法如下:

p:first-line {
  color: lightcoral;
}

::first-letter | 选择这条线的第一个字

CSS 伪元素 ::first-letter选择某一级元素第一行的第一个字母。用法如下:

相关专题