Skip to content

伪类和伪元素

伪类

伪类是用来添加一些选择器的特殊效果。

伪类语法

css
selector:pseudo-class {
  property: value;
}

在 CSS 类中:

css
selector.class:pseudo-class {
  property: value;
}

anchor 伪类

可以用伪类来定义链接的不同状态。

css
a:link {
  color: #ff0000;
} /* 未访问的链接 */
a:visited {
  color: #00ff00;
} /* 已访问的链接 */
a:hover {
  color: #ff00ff;
} /* 鼠标划过链接 */
a:active {
  color: #0000ff;
} /* 已选中的链接 */

注意:

  • a:hover 必须被置于 a:linka:visited 之后才是有效的。
  • a:active 必须被置于 a:hover 之后才是有效的。
  • 伪类的名称不区分大小写。

伪类结合 CSS 类

伪类可以与 CSS 类结合使用:

css
a.red:visited {
  color: #ff0000;
}

:first-child 伪类

:first-child 伪类用来选择父元素的第一个子元素。

如选择任何元素的第一个子元素的 <p> 元素。

css
p:first-child {
  color: blue;
}

亦可结合组合选择符使用,如选择所有 <p> 元素的第一个 <i> 元素。

css
p > i:first-child {
  color: blue;
}

伪元素

伪元素也是用来添加一些选择器的特殊效果。

伪元素语法

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

在 CSS 类中:

css
selector.class:pseudo-element {
  property: value;
}

:first-line 伪元素

:first-line 用于向文本的首行设置特殊样式。

如对 <p> 的第一行文本进行格式化:

css
p:first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意::first-line 只能用于块级元素。

:first-letter 伪元素

:first-letter 用于向文本的首字母设置特殊样式。

如设置 <p> 的第一个字符较大。

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

注意::first-letter 只能用于块级元素。

伪元素结合 CSS 类

css
p.article:first-letter {
  color: #ff0000;
}

多个伪元素

伪元素可以结合多个来使用。

如分别设置 <p> 的第一行和首字符样式。

css
p:first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p:first-line {
  color: #0000ff;
  font-variant: small-caps;
}

:before 伪元素

:before 可以在元素的前面插入内容。

如在 <h1> 的前面插入一张图片:

css
h1:before {
  content: url(smiley.png);
}

:after 伪元素

:after 可以在元素的后面插入内容。

如在 <h1> 的后面插入一张图片:

css
h1:after {
  content: url(smiley.png);
}

Released under the MIT License.