【伪类、动态伪类、伪元素详解并且配有代码和效果展示】

最新推荐文章于 2024-08-17 14:58:02 发布

zyj_cute

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量640

点赞数

分类专栏： css的学习文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_41564804/article/details/130723395

版权

css的学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

补充说明：
伪类
伪类（味蕾）：伪类是选择器的一种，它用于选择处于特定状态的元素。
就好比你的舌头上的味蕾，也会挑选它喜欢的，那我们在这里把你喜欢的东西当作特定状态的元素。

伪类的作用：用于解决无效的选择器列表，使用 :is() 或 :where() 伪类，它们接受一个可容错选择器列表。可容错选择器列表中的每个选择器都被单独解析。因此列表中任何无效的选择器会被忽略，而有效的选择器则会被有效使用。

应用场景：

鼠标停留在某行字体上的时候，这行字体发生颜色的改变。
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

使用伪类的注意点

:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
建议的编写顺序是 :link、:visited、:hover、:active

伪类个别介绍：

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）

言简意赅：就是原来的标签上面没有＋冒号的时候，就是我们看到的样子，一旦+了冒号和对应的属性，就是伪类，然后我们对应官方文档的属性，去看这个伪类是什么意思，会产生什么效果。

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>

</body>
</html>

在这里插入图片描述
当鼠标悬停在上面之后：

伪类的更多内容见：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类： a:link、a:visited、a:hover、a:active、:focus等等
选择获得焦点的元素。
动态伪类的编写顺序： :link、:visited、:focus、:hover、:active

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个p标签元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。。
:link	a:link	选择所有未被访问的链接。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

动态伪类举例

<body>  
  <a href="http://www.baidu.com">百度一下</a>
  <input type="text">
  <div>我是div元素</div>
</body>

<style>
    a:visited {
      color: pink;
    }

    /* a元素鼠标放到上面 */
    a:hover {
      color: blue;
    }

    /* 点击未松开鼠标 */
    a:active {
      color: purple;
    }

    /* 所有的状态下同样的样式 */
    a {
      color: burlywood;
    }*/

效果：
未点击时：
在这里插入图片描述

悬停效果：
在这里插入图片描述

按住鼠标未松开效果：
在这里插入图片描述

点击后效果：
在这里插入图片描述

伪元素：

一般为了区分伪元素和伪类，伪元素会使用2个冒号，比如::after。
所有 CSS 伪元素

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

伪类元素的使用方法：
例如：::first-line可以针对首行文本设置属性。

.box::first-line {
      font-size: 30px;
      color: orange;
    }

<div class="box">
    <span class="keyword">您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪，可爱猪可爱猪猪可爱猪猪可爱猪猪。
  </div>