CSS伪元素

最新推荐文章于 2024-05-28 07:58:52 发布

小简(JanYork)

最新推荐文章于 2024-05-28 07:58:52 发布

阅读量1.1k

点赞数 19

分类专栏： HTML5基础知识 CSS3基础讲解文章标签： css css3 html html5 前端

本文链接：https://blog.csdn.net/qq_60750453/article/details/121119492

版权

HTML5基础知识同时被 2 个专栏收录

14 篇文章 10 订阅

订阅专栏

CSS3基础讲解

10 篇文章 4 订阅

订阅专栏

我们先前讲过伪类选择器，伪类选择器实则就是选择一种元素的特殊状态，那我们今天来看一看CSS的伪元素

什么是伪元素？

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

例如，它可用于：

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

我们先前讲伪类选择器，我们发现伪类选择器前面是由 : 来连接属性的，比如 :hover ，于是我们看到这个伪元素是不是也觉得格式与伪类选择器一样呢？

确实，我们的伪元素是可以通过 : 来连接的，可是，我们要知道，既然是语法那就一定有规范，虽然用 : 并没有错，但是我们必须要按规范来！

那么规范是怎么样的呢？看看这一段代码：

p::first-line {
 //属性
}

这里可以看出，我们的伪元素是用 :: 连接的，比伪类选择器要多一个，不过这不是重点，我们重点是要搞懂这个东西怎么用，该在什么时候用！

::first-line

我们就从这个CSS效果开始分析，这个代码的意思是对 p 标签中的第一行进行属性效果更改

我们来写一个试试看

<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p::first-line{color: aqua;font-size: 20px;}
    </style>
</head>
<body>
    <p>这是一个p标签，我伪为了体现效果，我将会使用---将内容拉长---------------------------------------------------------------------------------------------------------------</p>
</body>

::first-line 这个伪元素效果是选择某个标签里面内容的第一行，无论你的内容如何改变，浏览器窗口放大缩小，只要内容在第一行，总之就会执行CSS所写的效果

我们运行一下上面的代码，看看效果：

不过，这种效果是有局限性的，我们需要注意以下几点：

::first-line 伪元素只能应用于块级元素

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

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

这里我补充一下，我们继续往下讲，我们要知道，CSS也是分版本的，就像HTML5和HTML一样，我们先前说了，:也是可以用于伪元素的，不过，他之所以可以两个通用的原因是因为在 CSS3 中，双冒号取代了伪元素的单冒号表示法。在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。

::first-letter

我们上面那个伪元素是用于选择第一行的，那么，既然有第一行自然也有第一个啊，那如何选择第一个呢？

下面这个元素就可以帮我们选择第一个（字符或者其他可选内容）

::first-letter 伪元素用于向文本的首字母添加特殊样式

比如我想让第一个字母的字体颜色永远是红色，并且比其他的字都大，我们直接在上面那个代码里面添加试试

    <style>
        p::first-line{color: aqua;font-size: 20px;}
        p::first-letter{color: rgb(233, 55, 55);font-size: 25px;}
    </style>

效果是这样的：

这个伪元素的局限性和上面那个一样！

我就不多解释了

::before与::after

我们可能经常在网站上看到一些这样的内容（我这个网站不是使用这个属性，只是举个例子）：

或者，在一段文字的最前面或者最后面有一些自带的内容，算了，说不清楚，上代码自己试试：

<!DOCTYPE html>
<html lang="Zh-cn">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        p::before{content:"© 【"}
        P::after{content: "】";}
    </style>
</head>
<body>
    <p>小简</p>
</body>
</html>

我们这里除了::before和::after 发现还有一个内容，叫content，这个属性与这两个伪元素是天造地设的一对啊，缺少content基本啥也干不了

这里主要是要知道这两个伪元素的作用，content后面再讲解，有兴趣可以自己研究研究！

我们看看效果：

这里我说一下，像我们::before和::after来添加的内容是不可以被鼠标选中的，看看上面的演示图就懂了

总结

伪元素列表

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

所有CSS伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

注：此处借用了w3school里面的表格内容

好了，伪元素就这样，很容易吧！拜拜，各位！

小简(JanYork)

关注

19
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
10
评论
CSS伪元素

我们先前讲过伪类选择器，伪类选择器实则就是选择一种元素的特殊状态，那我们今天来看一看CSS的伪元素什么是伪元素？CSS 伪元素用于设置元素指定部分的样式例如，它可用于：设置元素的首字母、首行的样式在元素的内容之前或之后插入内容我们先前讲伪类选择器，我们发现伪类选择器前面是由 : 来连接属性的，比如:hover ，于是我们看到这个伪元素是不是也觉得格式与伪类选择器一样呢？确实，我们的伪元素是可以通过 : 来连接的，可是，我们要知道，既然是语法那就一定有规范，虽然用: 并没有错，但..
复制链接

扫一扫