CSS ::first-line伪元素-之路教程

::first-line Pseudo-element 的特殊性和继承性

出现在第一行的子元素部分，来自 ::first-line 伪元素仅继承适用于 ::first-line 伪元素的属性。
对于其余的属性，它继承自 ::first-line 伪元素的非伪元素父元素。
例如，::first-letter 伪元素用于设置元素的第一个字母的样式。

它继承了 ::first-line 伪元素应用的样式。

当使用 ::first-line 伪元素应用的样式与应用于段落的样式之间存在冲突时，第一个总是获胜，即使在段落具有设置的特殊样式规则的情况下用 !important bash。

CSS ::first-line伪元素

::first-line 伪元素将样式放在块级容器的第一行。
它不选择内联级元素，例如图像或者内联表。

一些 CSS 属性可用于设置 ::first-line 的样式，它们是：

字体属性
背景属性
文字装饰、文字转换、字母间距、字间距、颜色。

::first-letter 继承了使用 ::first-line 应用的样式。

如果两个元素都被使用，::first-letter 指定的样式会覆盖 ::first-line 应用的样式。

::first-line 伪元素也可以与一个冒号符号 :first-line 一起使用，所有浏览器都支持它。

允许的属性

::first-line 伪元素只接受一些 CSS 属性。
让我们看看有哪些：

与字体相关的所有属性：font、font-kerning、font-style、font-variant、font-variant-numeric、font-variant-east-asian、font-variant-caps、font-variant-alternates、font -variant-ligatures、font-feature-settings、font-language-override、font-weight、font-size、font-size-adjust、font-stretch 和 font-family，
所有与背景相关的属性：background-color, background-clip, background-image, background-oroirn, background-position, background-repeat, background-size, background-attachment, 以及 background-blend-mode,
一些用于设置文本样式的属性：text-shadow、text-decoration、text-decoration-color、text-decoration-line、text-decoration-style 和 vertical-align，
CSS 颜色属性，
word-spacing, line-height, letter-spacing, text-transform 以及 text-decoration.

语法

::first-line {
  css declarations;
}

::first-line 伪元素的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。
</p>
  </body>
</html>

日期：2020-06-02 22:14:29 来源：oir作者：oir

←CSS 伪元素 ::first-letter

CSS :first-of-type 伪类→

::first-line Pseudo-element 的特殊性和继承性

允许的属性

语法

::first-line 伪元素的示例：

目录