码农教程 - 一技在手,衣食无忧! tools

目录

CSS 伪元素

❮ 上一节 下一节 ❯

什么是伪元素？

CSS 伪元素用于设置元素的指定部分的样式。

例如，它可用于：

  • 设置元素的第一个字母或行的样式
  • 在元素内容之前或之后插入内容

语法

伪元素的语法：

selector::pseudo-element {
  property: value;
}

::first-line 伪元素

这个::first-line伪元素用于向文本的第一行添加特殊样式。

以下示例格式化所有 <p> 元素中文本的第一行：

示例

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
亲自试一试 »

笔记：这个::first-line伪元素只能应用于块级元素。

以下属性适用于::first-line伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 字间距
  • 字母间距
  • 文字修饰
  • 垂直对齐
  • 文本转换
  • 行高
  • 清除

注意双冒号符号 -::first-line相对:first-line

双冒号取代了 CSS3 中伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素。

单冒号语法用于 CSS2 和 CSS1 中的伪类和伪元素。

为了向后兼容，CSS2 和 CSS1 伪元素可以接受单冒号语法。

::首字母伪元素

这个::first-letter伪元素用于向文本的第一个字母添加特殊样式。

以下示例格式化所有 <p> 元素中文本的第一个字母：

示例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
亲自试一试 »

笔记：这个::first-letter伪元素只能应用于块级元素。

以下属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 填充属性
  • 边框属性
  • 文字修饰
  • 垂直对齐（仅当 "float" 为 "none" 时）
  • 文本转换
  • 行高
  • 漂浮
  • 清除

伪元素和 HTML 类

伪元素可以与 HTML 类组合：

示例

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}
亲自试一试 »

上面的示例将以红色且更大的尺寸显示 class="intro" 的段落的第一个字母。

多个伪元素

也可以组合多个伪元素。

在以下示例中，段落的第一个字母将为红色，字体大小为 xx-large。第一行的其余部分将是蓝色的，并且是小写字母。该段落的其余部分将是默认的字体大小和颜色：

示例

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
亲自试一试 »

CSS - ::before 伪元素

这个::before伪元素可用于在元素内容之前插入一些内容。

以下示例在每个 <h1> 元素的内容之前插入图片：

示例

h1::before {
  content: url(smiley.gif);
}
亲自试一试 »

CSS - ::after 伪元素

这个::after伪元素可用于在元素内容之后插入一些内容。

以下示例在每个 <h1> 元素的内容之后插入图片：

示例

h1::after {
  content: url(smiley.gif);
}
亲自试一试 »

CSS - ::marker 伪元素

这个::marker伪元素选择列表项的标记。

以下示例设置列表项标记的样式：

示例

::marker {
  color: red;
  font-size: 23px;
}
亲自试一试 »

CSS - ::selection 伪元素

这个::selection伪元素匹配用户选择的元素部分。

以下 CSS 属性可应用于::selection：color,background,cursor， 和outline。

以下示例使所选文本在黄色背景上变为红色：

示例

::selection {
  color: red;
  background: yellow;
}
亲自试一试 »

通过练习测试一下

练习:

将段落第一行的背景颜色设置为红色。

<style>
 {
  background-color: red;
}
</style>

<body>

<p class="intro">
In my younger and more vulnerable years
my father gave me some advice that I've
been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me,
'just remember that all the people in this world
haven't had the advantages that you've had.'
</p>

</body>

开始练习

所有 CSS 伪元素

Selector Example Example description
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
::marker ::marker Selects the markers of list items
::selection p::selection Selects the portion of an element that is selected by a user

所有 CSS 伪类

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

❮ 上一节 下一节 ❯