CSS - Pseudo-classes(伪类选择器)

embedded/2025/3/18 7:58:09/

目录

  • 一、介绍
  • 二、常用种类
  • 三、案例实现
    • 案例一:a标签使用link/visited/hover/active
    • 案例二:表单元素使用focus/disabled
    • 案例三、通过其余伪类实现元素灵活选中

一、介绍

CSS 伪类(Pseudo-classes) 用于定义元素的特定状态结构位置,从而允许你为这些特殊场景添加样式。伪类以冒号 : 开头,附加在选择器后

css">/* 举例 */
a:link{color: #fff;background-color: aqua;
}

二、常用种类

伪类含义
:link选中未访问的链接
:visited选中已访问的链接
:hover鼠标悬停在元素上时
:active元素被激活(如鼠标按下元素)时
:focus元素获得焦点(如表单输入框被选中)
:disabled禁用的表单元素
:checked被选中的复选框或单选按钮
:first-child元素的第一个子元素
:last-child元素的最后一个子元素
:first-of-type选中第一个指定类型的子元素
:last-of-type选中最后一个指定类型的子元素
:nth-child(n)选中第 n 个子元素(支持公式如 2n+1)
:nth-of-type(n)选中该类型元素的第 n 个

三、案例实现

案例一:a标签使用link/visited/hover/active

当我们同时使用多种选中样式的伪类时,生效的顺序十分重要!!!这里通过爱恨法则来加快记忆

爱恨法则 Love Hate -> link visited hover active

效果代码:hover和active需要鼠标移动至元素/鼠标按下激活元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>css">.nav a{width: 100px;height: 50px;text-decoration: none;background-color: antiquewhite;}/*伪类顺序: 爱恨法则 Love Hate -> link visited hover active  *//* line 选中未访问过的超链接 */.nav a:link{color: #fff;background-color: aqua;}/* visited 选中访问过的超链接 */.nav a:visited{background-color: aquamarine;}/* hover 选中鼠标移入的元素 */.nav a:hover{background-color: azure;}/* active 选中鼠标按下的元素 */.nav a:active{color: #fff;background-color: red;}</style>
</head>
<body><div class="nav"><a href="https://gitee.com/">gitee</a><a href="https://www.bilibili.com">哔哩哔哩</a><a href="https://ys.mihoyo.com/">原神</a><a href="https://chat.deepseek.com/">deepseek</a></div>
</body>
</html>

效果
在这里插入图片描述

案例二:表单元素使用focus/disabled

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>css">form input:focus{outline: 1px solid red;}form button:disabled{cursor: not-allowed;}</style>
</head>
<body><form><input type="text" placeholder="一步一步向上爬"><button disabled>成绩加一</button></form>
</body>
</html>

focus:表单聚焦
disabled:表单元素禁用,这里改动的是鼠标样式
效果
在这里插入图片描述

案例三、通过其余伪类实现元素灵活选中

注意!!!:first-child 的匹配规则- - last-child同理

  • 严格检查位置:只有同时满足以下两个条件时才生效:
    • 元素是父容器第一个子元素
    • 元素类型与选择器指定的标签匹配

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>css">p:first-child{color: red;}</style>
</head>
<body><div> <!-- 父元素 --><span>span:灵活的选择器</span> <!-- 第一个为span --><div> <!-- 父元素 --><p>p:分割线</p> <!-- 第一个为p,满足条件 --></div><div> <!-- 父元素 --><span>span</span> <!-- 第一个为span --><p>p:分割线</p></div></div>
</body>
</html>

效果
在这里插入图片描述


案例:first-of-type

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>css">p:first-of-type{color: red;}</style>
</head>
<body><div><span>灵活的选择器</span><div><p>分割线</p></div><div><span>111</span><p>分割线</p></div></div></div>
</body>
</html>

案例:实现斑马线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类</title><style>css">.list{width: 400px;outline: 1px solid red;}.list p{margin: 0;}.list p:first-child{text-align: center;font-size: 32px;} .list p:nth-child(2n+3){background-color: hsl(160, 88%, 80%);}.list p:nth-child(2n){background-color: aqua;}</style>
</head>
<body><div class="list"><p><span>你好</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p><p><span>相信自己,你一定可以的,不要忘记休息</span></p></div>
</body>
</html>

效果
在这里插入图片描述


http://www.ppmy.cn/embedded/173526.html

相关文章

【嵌入式】ESP_01S智能家居:可二次开发式智能灯控/门禁,勾勒智能生活新图景

每文一诗 &#x1f4aa;&#x1f3fc; 操千曲而后晓声&#xff0c;观千剑而后识器。 ——《文心雕龙知音》 译文&#xff1a;掌握很多支乐曲之后才能懂得音乐&#xff0c;观察过很多柄剑之后才懂得如何识别剑器。 背景自述 由于最近搬了一个新的房间&#xff0c;来回的用钥匙开…

Java0317初尝试与报错

支付模块&#xff1a;27min讲了打开神秘开关 在前面讲了Data&#xff0c;NoArgsConstructor&#xff0c;AllArgsConstructor lombok技术 报错1 package com.itheima.demo; public class GoldCard extends Card { Override public void cost(double money){ //消费八折 setM…

C语言的软件工程

C语言的软件工程 引言 C语言作为一种历史悠久、功能强大的编程语言&#xff0c;在软件工程领域有着广泛的应用。自1972年由Dennis Ritchie开发以来&#xff0c;C语言凭借其高效性能、灵活性以及可移植性&#xff0c;成为了操作系统、嵌入式系统及高性能应用程序开发的首选语言…

Qt MainWindow简单例子(文本编辑)

使用Qt控件练习文本编辑窗口的创建。 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QLabel> #include <QProgressBar>QT_BEGIN_NAMESPACE namespace Ui { class MainWindow; } QT_END_NAMESPACEclass MainWindow : public Q…

【Linux内核系列】:进程板块与文件板块的综合

&#x1f525; 本文专栏&#xff1a;Linux &#x1f338;作者主页&#xff1a;努力努力再努力wz &#x1f4aa; 今日博客励志语录&#xff1a; 人生中成功只是一时的&#xff0c;失败却是人生的主旋律&#xff0c;但是如何面对失败却把人分成了不同的样子&#xff0c;有的人会被…

泽众TestOne推出快速测试用例设计,让自动化更快捷

在当今快速迭代的软件开发环境中&#xff0c;测试用例设计的效率和质量直接关系到软件交付的速度和质量。传统测试用例设计方法往往依赖于测试人员的经验&#xff0c;经验不足的测试人员可能无法识别潜在的测试场景&#xff0c;导致关键问题被遗漏。同时&#xff0c;传统方法在…

Socket 、WebSocket、Socket.IO详细对比

WebSocket、Socket 和 Socket.IO 是网络通信中常用的技术&#xff0c;它们在功能、使用场景和实现方式上有明显的异同点。以下是它们的详细对比&#xff1a; 1. Socket 定义 Socket 是一个通用的网络编程接口&#xff0c;用于在网络上实现进程间通信&#xff08;IPC&#xff0…

变量和数据类型——Python

变量 计算机语言中变量的概念源于数学。在数学中&#xff0c;变量指用拉丁字母表示的、值不固定的数据&#xff1b;在计算机语言中&#xff0c;变量指能存储计算结果或表示值的抽象概念——程序在运行期间用到的数据会被保存在计算机的内存单元中。为了方便取内存单元中的数据…