伪类和伪元素

文章目录

1. 1. 1.伪类
2. 2. 2.伪元素
3. 3. 3.伪类和伪元素的区别（CSS3下的区别）
   1. 3.1. 伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息；
   2. 3.2. 而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
4. 4. 4.主要用法
   1. 4.1. 4.1伪类
5. 5. 4.2 伪元素

伪类和伪元素的区别，其实很简单，从字面上就可以理解。它们有一个共同的修饰词“伪”，那么“伪”是什么意思呢？就是假的呗。所以，伪类就是假的类，伪元素就是假的元素，这就是在字面上它们之间的区别。(我的记法:伪类(泪)正常2只眼睛流泪,但是是伪的所以就只有一行眼泪了:,伪元素那就是2行了::)下面我们再从定义上感受一下。

1.伪类

伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。

通过上面的概念我们知道了伪类的功能有两种：

1.格式化DOM树以外的信息。比如：<a>标签的:link、:visited等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过:first-child来获取到。

2.伪元素

伪元素可以创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用::before或::after。

3.伪类和伪元素的区别（CSS3下的区别）

通过上面的概念，我们就可以知道伪类与伪元素最本质的一个区别：

伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息；

HTML:

<ul>
    <li>11111</li>
    <li>22222</li>
</ul>

CSS：

li:first-child {
    color: red;   
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足

而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

HTML：

<p>
    <span class="first-letter">H</span>ello, World
</p>

CSS：

.first-letter {
  color: red;
}

用伪元素来写,上面的代码其实就是：

p::first-letter {
  color: red;
}

所以，你可以理解伪元素本质上是创建了一个虚拟容器(元素)了吧。

4.主要用法

4.1伪类

1 :first-child

匹配第一个子元素。

HTML：

<ul>
    <li>111</li>
    <li>222</li>
</ul>    

CSS：

li:first-child {
  color: red; // 第一个 li 会变红
}

2 :last-child

匹配最后一个子元素。

HTML：

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

CSS：

li:last-child {
  color:red; // 最后一个 li 会变红
}

3 :first-of-type

匹配属于其父元素的第一个特定类型的子元素。

HTML：

<div>
    <h1>h1文本</h1>
      <p>p文本</p>
</div>

CSS：

p:first-of-type {
  color: red;  // <p>标签的内容变为红色
}

这里有必要强调一下:first-child与``:first-of-type的区别。如果你的CSS写成:

p:first-child {
  color:red;
}

页面是不会有变化的，因为<p>元素并不是父元素<div>的第一个子元素。

4 :last-of-type

匹配属于其父元素的最后一个特定类型的子元素。

HTML：

<div>
    <h1>h1文本</h1>
    <h1>h1文本2</h1>
    <p>p文本</p>
</div>

CSS：

h1:last-of-type {
  color: red;  // 倒数第一个<h1>标签的内容变为红色(h1文本2)
}

4.2 伪元素

1 ::before

在被选元素之前插入内容。需要指定content属性来插入内容。

HTML：

<p>CSS</p>
CSS：

p::before {
  content: "Hi,";
}

2 ::after

在被选元素之后插入内容。需要指定content属性来插入内容。

HTML：

<p>Hi, </p>
CSS：

p::after {
  content: "CSS";
}

3 ::first-letter

匹配元素中文本的首字母。

HTML：

<p>我在学伪元素</p>
注意：试试把<p>标签改成<p>???我在学伪元素</p>，你会发现很有意思的现象。

CSS：

p::first-letter {
  font-size: 32px;
}

4 ::first-line

匹配元素中第一行的文本(只能在块元素中使用)。

HTML：

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>
CSS：

p::first-line {
  color: red;
}

5 ::selection

匹配被用户选中的部分。

HTML：

<p>我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素,我在学伪元素</p>
CSS：

p::selection {
  color: red;
}