CSS中的伪类和伪元素（详细）-CFANZ编程社区

这篇想要跟大家分享的是css中的伪类和伪元素，有任何问题可以私聊我或者评论哦！

首先，我们先来想一下

一、引入伪类跟伪元素的原因？

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述

比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，因此引入。

二、什么是伪类，伪元素？

1、伪类

概念：为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

2、伪元素

概念：创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)

它可以用于

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

三、伪类

分类

状态伪类
结构性伪类

1、状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

常见的状态伪类

实例

<!DOCTYPE html>
<html>
<head>
<style>
/* 未访问的链接 */
a:link {
  color: red;
}

/* 已访问的链接  */
a:visited {
  color: green;
}

/* 鼠标悬停链接  */
a:hover {
  color: hotpink;
}

/* 已选择的链接*/
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><a href="">这是一个链接</a></p>

</body>
</html>

注意：

伪类和 CSS 类

当您将鼠标悬停在类highlight上时，会改变颜色：

a.highlight:hover {
  color: red;
}

悬停在 <div> 上

div:hover {
  background-color: blue;
}

把鼠标悬停到 <div> 元素以显示 <h1>元素（类似工具提示的效果）

h1 {
  display: none;
  background-color: green;
  padding: 25px;
}

div:hover h1 {
  display: block;
}

2、结构性伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

常见的结构性伪类

实例

选择器匹配p元素的第一个子元素：

p:first-child {
  color: red;
}
<p>你好</p>
<p>好啊</p>

匹配所有 <p> 元素中的首个 <i> 元素:

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

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

<p>我是一个<i>强壮</i>的男人。我是一个<i>强壮</i>的男人。</p>

段落2变成蓝色

p:nth-child(3)
{
background:blue;
}
 
<body>
 
<h1>今天学习伪类和伪元素</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>

 
</body>

在上一个代码中，如果p:nth-child(3)改为属p:nth-of-type(3) ，则意思为规定其父元素的第3个 p 元素，那么变蓝色的是段落3

lang="en" 的 q 元素定义~：

q:lang(en) {
  quotes: "~" "~";
}

<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>

选择获得焦点的 <input> 元素(点击输入框，背景颜色变为黄色）:

input:focus {
  background-color: yellow;
}
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>

四、伪元素

所有的伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

注意：

对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法，::before 作用是一样的，所以，如果网站只需要兼容 webkit、firefox、opera 等浏览器，伪元素建议采用双冒号的写法，如果是要兼容 IE 浏览器，建议用 CSS2 的单冒号写法。

实例

为所有 <p> 元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-size:16px;
}

在这里对于::first-line,我们需要注意，::first-line 伪元素只能应用于块级元素。

设置所有 <p> 元素中文本的首字母格式：

p::first-letter {
  color: red;
  font-size: 16px;
}

在这里对于::first-letter ,我们需要注意，::first-letter 伪元素只能应用于块级元素。

在这里要对::before和::after,做个讲解

在元素的 ::before和 ::after中插入内容-content属性（如果没有写content样式，伪元素会失效）

默认值：	normal
继承：	no
版本：	CSS2
JavaScript 语法：	object.style.content="url(beep.wav)"

contnt属性的类别：

none	设置 content 为空值。
normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）
attr(attribute)	将元素的 attribute 属性以字符串形式返回。。
string	设置文本内容
open-quote	设置前引号
close-quote	设置后引号
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址
inherit	指定的 content 属性的值，应该从父元素继承

在每个 <h1> 元素的内容之前插入一幅图：

h1::before {
  content: url();
}

在每个 <h1> 元素的内容之后插入一幅图像：

h1::after {
  content: url();
}

使所选文本在蓝色背景上显示为红色：

::selection {
  color: red; 
  background:blue;
}

伪元素与 CSS 类结合使用：(将以粉色和较大的字体显示 class="name" 的段落的首字母。)

p.name::first-letter {
  color: hotpink;
  font-size: 200%;
}  

<p class="name">你好漂亮！</p>

五、伪类和伪元素的应用

1、画分割线

效果如图

<style>
/*content没有内容也一定要记得写*/
    .line::before, .line::after {
      content: '';
      display: inline-block;
      width: 300px;
      border-top: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>
  <p class="line">此处为分割线</p>
</body>