伪类和伪元素的区别

最新推荐文章于 2024-07-17 18:42:40 发布

zzlwei

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量199

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/zzlwei/article/details/107003280

版权

伪类和伪元素的区别

在没了解他们的区别之前，我一直以为就是一种东西的别称，现在我大概知道了他们之间的区别，所以来写个博客，记录一下。

伪元素

::before 在被选元素之前插入内容。需要指定content属性来插入内容。
::after 在被选元素之后插入内容。需要指定content属性来插入内容。
::first-letter 匹配元素中文本的首字母。
::first-line 匹配元素中第一行的文本(只能在块元素中使用)。
::selection 匹配被用户选中的部分。

伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素，如：div::before。

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

例如改变每个 p元素的第一个字母的样式

<html>
<head>
<style type="text/css">
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
</style>
</head>

<body>
<p>This is a text.</p>
</body>
</html>

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

伪类

:first-child 匹配第一个子元素。
:last-child 匹配最后一个子元素。
:first-of-type 匹配属于其父元素的第一个特定类型的子元素。
:last-of-type 匹配属于其父元素的最后一个特定类型的子元素。

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素，如：a:hover

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

例如改变第一个li的颜色

<html>
<head>
<style type="text/css">
li:first-child {
  color: red; 
}
</style>
</head>

<body>
<ul>
    <li>111</li>
    <li>222</li>
</ul>   
</body>
</html>

除了上面这个本质区别以外，在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素。

简单地理解，就是伪类选择的是本身就存在的，但不好选择的，通过伪类选择器来选定它，并给它css样式；而伪元素更像是创建了不好创建的元素，并给它css样式。

zzlwei

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪类和伪元素的区别

伪类和伪元素的区别在没了解他们的区别之前，我一直以为就是一种东西的别称，现在我大概知道了他们之间的区别，所以来写个博客，记录一下。伪元素::before 在被选元素之前插入内容。需要指定content属性来插入内容。::after 在被选元素之后插入内容。需要指定content属性来插入内容。::first-letter 匹配元素中文本的首字母。::first-line 匹配元素中第一行的文本(只能在块元素中使用)。::selection 匹配被用户选中的部分。伪元素主要是用来创建一些不存
复制链接

扫一扫