CSS日常总结--CSS伪类

news2025/1/20 19:20:00

前言

CSS伪类是一种允许选择文档中特定状态或位置的CSS选择器。它们用于选择不同状态下的元素，而无需改变HTML标记的内容。伪类以冒号（:）开头，紧随其后的是伪类的名称。它们与选择器结合使用，以定义在特定条件下应用的样式。伪类的主要作用是允许开发者根据用户的交互、文档结构或其他条件来选择元素，从而实现更加动态和交互性的样式。

一、结构性伪类:

1. :first-child：选择父元素下的第一个子元素

选择父元素下的第一个子元素。

li:first-child {
color: red;
}

2. :last-child：选择父元素下的最后一个子元素

选择父元素下的最后一个子元素。

li:last-child {
color: blue;
}

3. :nth-child(n)：选择父元素下的第n个子元素

选择父元素下的第n个子元素。

li:nth-child(odd) {
background-color: #f2f2f2;
}

4. :nth-last-child(n)：从最后一个子元素开始计数，选择第n个子元素

从最后一个子元素开始计数，选择第n个子元素。

li:nth-last-child(2) {
font-weight: bold;
}

5. :nth-of-type(n)：选择与同类型的兄弟元素中的第n个元素

选择与同类型的兄弟元素中的第n个元素。

p:nth-of-type(2n) {
color: green;
}

6. :nth-last-of-type(n)：从同类型的兄弟元素的最后一个开始计数，选择第n个元素

从同类型的兄弟元素的最后一个开始计数，选择第n个元素。

p:nth-last-of-type(odd) {
text-decoration: underline;
}

7. :first-of-type：选择同类型的兄弟元素中的第一个元素

选择同类型的兄弟元素中的第一个元素。

h2:first-of-type {
font-size: 24px;
}

8. :last-of-type：选择同类型的兄弟元素中的最后一个元素

选择同类型的兄弟元素中的最后一个元素。

span:last-of-type {
border: 1px solid #ccc;
}

9. :only-child：选择是其父元素中唯一的子元素的元素

选择是其父元素中唯一的子元素的元素。

div:only-child {
background-color: yellow;
}

10. :only-of-type：选择是其父元素中唯一的特定类型的子元素的元素

选择是其父元素中唯一的特定类型的子元素的元素。

p:only-of-type {
color: purple;
}

二、功能性伪类:

1.:not(selector)：选择不匹配给定选择器的元素

选择不匹配给定选择器的元素。

input:not([type=“submit”]) {
border: 1px solid #999;
}

三、界面状态伪类:

1. :hover：鼠标悬停时应用的样式

鼠标悬停时应用的样式。

a:hover {
color: orange;
}

2. :active：元素被激活时应用的样式

元素被激活时（例如，按钮被按下）应用的样式。

button:active {
background-color: #ccc;
}

3. :focus：元素获得焦点时应用的样式

元素获得焦点时应用的样式，通常与表单元素一起使用。

input:focus {
border: 2px solid blue;
}

四、界面结构伪类:

1. :target：选择当前活动的目标元素

选择当前活动的目标元素，通常与页面内链接（锚点）一起使用。

#section1:target {
background-color: lightyellow;
}

五、链接伪类:

1. :link：选择未被访问的链接

选择未被访问的链接。

a:link {
color: blue;
}

2. :visited：选择已被访问的链接

选择已被访问的链接。

a:visited {
color: purple;
}

六、动态变化伪类:

1. :focus-within：选择包含有焦点元素的元素

选择包含有焦点元素的元素。

form:focus-within {
border: 2px solid #555;
}

七、表单伪类:

1. :checked：选择被选中的表单元素

选择被选中的表单元素，例如复选框或单选按钮。

input[type=“checkbox”]:checked {
border-color: green;
}

2. :disabled：选择被禁用的表单元素

选择被禁用的表单元素。

input:disabled {
background-color: #eee;
}

3. :enabled：选择处于启用状态的表单元素

选择处于启用状态的表单元素。

input:enabled {
background-color: #fff;
}

八、其他伪类：

1. :empty ：选择没有子元素的元素

选择没有子元素的元素。

p:empty {
display: none;
}

2. :is()：选择器匹配元素，类比组合选择器

用法：:is(selector) 或 :matches(selector)

示例：选择所有段落和标题元素，其中至少一个具有类名为 “important” 的元素。

:is() 伪类允许您组合多个选择器，只要其中至少一个选择器匹配元素，整个选择器就匹配。这有助于简化复杂的选择器，提高代码的可读性。
:is(p, h1, h2, h3):is(.important)

3. :where()：选择器匹配元素，优先级低

用法：:where(selector) 或 :matches(selector)

示例：选择所有段落和标题元素，其中至少一个具有类名为 “important” 的元素。

:where() 与 :is() 类似，允许组合多个选择器。与 :is() 不同的是，:where() 不会影响特异性，因此它更适合用于提高代码的可读性而不引入额外的特异性。
:where(p, h1, h2, h3):where(.important)

4. :has()：选择器匹配元素

用法：:has(selector)

示例：选择所有包含至少一个带有类名为 “highlight” 的子元素的 div 元素。

:has() 伪类用于选择包含特定后代的元素。如果指定的选择器匹配元素的后代，那么包含这些后代的元素就会被选择。这在需要选择包含特定内容的父元素时非常有用。
div:has(.highlight)

5. :matches():多条件支持
:matches()多条件支持：允许在一个选择器中同时匹配多个条件，类似于逗号分隔的选择器列表，但更灵活。
p:matches(:hover, :active) {}

经典案例分析

添加前缀/后缀
伪元素最常用的技巧就是利用 ::before 和 ::after伪元素给某个元素添加前缀或后缀，例如简单的 DOM 结构：

<div className="error-message">系统异常，请稍后再试</div>

应用下面的 CSS 样式之后：

.error-message {
  position: relative;
  color: #666666;
  padding: 12px 30px;
  background-color: #FFECE4;
  border-radius: 5px;
}

.error-message::before {
  content: '';
  background-image: url('/public/icon-error.svg');
  background-size: 15px;
  position: absolute;
  left: 10px;
  display: inline-block;
  width: 15px;
  height: 15px;
}

可以得到如下效果：
在这里插入图片描述

注意：创建 ::before和 ::after的元素时，必须要设置 content 属性，否则就不存在了。另外宿主元素的 position 别忘记设置成 relative 或 absolute 了，否则布局可能会乱掉。

虽然使用左右两个元素来布局也能实现上述效果，伪元素的优势是只需要创建一个元素即可。类似的场景还有在 input 输入框前面增加红色 require 星号。

消息气泡

我们在聊天时都会遇到带箭头的消息对话框，如下图所示：
在这里插入图片描述

实现上面布局也很简单，也是用的 ::before和 ::after伪元素，HTML 结构：

<div className="container">
  <div className="box top-arrow">Top </div>
  <div className="box right-arrow">Right</div>
  <div className="box bottom-arrow">Bottom</div>
  <div className="box left-arrow">Left</div>
</div>

CSS 代码：

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}

.box {
  width: 150px;
  height: 100px;
  background-color: red;
  color: white;
  position: relative;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.box::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
}

.box.bottom-arrow::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid red;
  left: 22px;
  top: -10px;
}

.box.right-arrow::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 12px solid red;
  top: 22px;
  left: -10px;
}

.box.left-arrow::after {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid red;
  top: 22px;
  right: -10px;
}

.box.top-arrow::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid red;
  left: 22px;
  bottom: -10px;
}

斑马条纹效果

在一个列表中，为奇数行和偶数行显示不同的颜色，效果如下：
在这里插入图片描述

HTML 结构：

<div class="container">
  <div>第1行</div>
  <div>第2行</div>
  <div>第3行</div>
  <div>第4行</div>
  <div>第5行</div>
  <div>第6行</div>
</div>

CSS 样式：

.container {
  width: 200px;
  margin: 50px auto;
  border: 1px solid antiquewhite;
}

.container div {
  padding: 5px;
}

.container div:nth-child(even) {
  background-color: antiquewhite;
}

悬浮高亮效果

在电商网站购物时，当用户鼠标悬浮在当前商品上面的时候，通过放大尺寸、增加阴影来突出显示，：
在这里插入图片描述

HTML 结构：

<div class="container">
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>

CSS 样式：

body {
  margin: 0;
  background-color: rgb(245, 245, 245);
}

.container {
  height: 200px;
  width: 360px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.product {
  width: 100px;
  height: 100px;
  background: white;
  background-image: url(//cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=400&h=400&f=webp&q=90);
  background-size: cover;
}

.product:hover {
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0, -5px, 0) scale(1.2);
  cursor: pointer;
}

自定义复选框样式

默认的复选框比较单调，利用伪类和伪元素配合，可以自定义 checkbox 样式，效果如下：
在这里插入图片描述

HTML 结构：

<div className="container">
  <div>
    <input type="checkbox" id="backend" />
    <label htmlFor="backend">后端开发</label>
  </div>

  <div>
    <input type="checkbox" id="backend" />
    <label htmlFor="backend">后端开发</label>
  </div>

  <div>
    <input type="checkbox" id="frontend" />
    <label htmlFor="checkbox">前端开发</label>
  </div>

  <div>
    <input type="checkbox" id="frontend" />
    <label htmlFor="checkbox">前端开发</label>
  </div>
</div>

CSS 样式：

input[type="checkbox"] {
  margin: 0;
}

#frontend {
  opacity: 0;
}

#frontend+label {
  margin-left: -12px;
  pointer-events: none;
}

#frontend+label::before {
  content: '\a0';
  display: inline-block;
  vertical-align: 0.1em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 0.2em;
  background-color: silver;
  text-indent: 0.15em;
  line-height: 0.65;
  cursor: pointer;
}

#frontend:checked+label::before {
  content: '\2713';
  background-color: yellowgreen;
}

自定义滚动条样式

浏览器自带的滚动条样式非常单一，不够美观，我们可以利用伪元素和伪类自定义一个滚动条，将其背景颜色改成淡灰，宽度为 6px，当鼠标悬浮上去之后宽度变为 10px。
在这里插入图片描述

HTML 结构：

<div class="container">
  <div class="rect">
    <div class="box"></div>
  </div>
  <div class="rect2">
    <div class="box"></div>
  </div>
</div>

CSS 样式：

.container {
  display: flex;
  justify-content: space-around;
}

.rect,
.rect2 {
  width: 200px;
  height: 200px;
  overflow: scroll;
  border: 1px solid gainsboro;
}

.rect2::-webkit-scrollbar {
  width: 10px;
  height: 0;
  background-color: transparent;
}

.rect2::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.08);
  border-left: 4px solid transparent;
  background-clip: padding-box;
}

.rect2::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border: 0;
}

.box {
  width: 100px;
  height: 300px;
  background-color: aliceblue;
}

附送250套精选项目源码

源码截图
​​在这里插入图片描述

源码获取：

关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1344646.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C语言】数据结构——带头双链表实例探究

【C语言】数据结构——带头双链表实例探究

&#x1f497;个人主页&#x1f497; ⭐个人专栏——数据结构学习⭐ &#x1f4ab;点击关注&#x1f929;一起学习C语言&#x1f4af;&#x1f4ab; 目录 导读&#xff1a;1. 双链表结构特征2. 实现双向循环链表2.1 定义结构体2.2 创造节点2.3 双向链表初始化2.4 双向链表打印2…
阅读更多...
C语言之指针和数组

C语言之指针和数组

指针和数组虽然是不同的东西&#xff0c;但却有着千丝万缕的关系&#xff0c;下面就让我们逐一了解吧&#xff01; 指针和数组 数组名原则上会被解释为指向该数组起始元素的指针。 也就是说。如果a是数组&#xff0c;那么表达式a的值就是a[0]的值&#xff0c;即与&a[0]一…
阅读更多...
「Verilog学习笔记」序列检测器（Moore型）

「Verilog学习笔记」序列检测器（Moore型）

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 timescale 1ns/1nsmodule det_moore(input clk ,input rst_n ,input din ,output reg Y ); parameter S0 …
阅读更多...
从物联网到 3D 打印：硬件相关的开源项目概览 | 开源专题 No.52

从物联网到 3D 打印：硬件相关的开源项目概览 | 开源专题 No.52

arendst/Tasmota Stars: 20.4k License: GPL-3.0 Tasmota 是一款为 ESP8266 和 ESP32 设备提供的替代固件&#xff0c;具有易于配置的 webUI、OTA 更新、定时器或规则驱动的自动化功能以及通过 MQTT、HTTP、串口或 KNX 进行完全本地控制。该项目主要特点包括&#xff1a; 支持…
阅读更多...
143.【Nginx-02】

143.【Nginx-02】

Nginx-02 (五)、Nginx负载均衡1.负载均衡概述2.负载均衡的原理及处理流程(1).负载均衡的作用 3.负载均衡常用的处理方式(1).用户手动选择(2).DNS轮询方式(3).四/七层负载均衡(4).Nginx七层负载均衡指令 ⭐(5).Nginx七层负载均衡的实现流程 ⭐ 4.负载均衡状态(1).down (停用)(2)…
阅读更多...
【Git】Git的基本操作

【Git】Git的基本操作

前言 Git是当前最主流的版本管理器&#xff0c;它可以控制电脑上的所有格式的文件。 它对于开发人员&#xff0c;可以管理项目中的源代码文档。&#xff08;可以记录不同提交的修改细节&#xff0c;并且任意跳转版本&#xff09; 本篇博客基于最近对Git的学习&#xff0c;简单介…
阅读更多...
docker学习笔记05-TCP远程连接与docker compose简介

docker学习笔记05-TCP远程连接与docker compose简介

1.配置docker客户端远程访问 A.在另一台机器上安装客户端 远程访问&#xff0c;再搭建一台测试机&#xff0c;先安装包dockercli 客户端 yum install -y yum-utils --或者用阿里源 快些 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos…
阅读更多...
Leetcode算法系列| 10. 正则表达式匹配

Leetcode算法系列| 10. 正则表达式匹配

目录 1.题目2.题解C# 解法一&#xff1a;分段匹配法C# 解法二&#xff1a;回溯法C# 解法三&#xff1a;动态规划 1.题目 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 1.‘.’ 匹配任意单个字符 2.‘.’ 匹配任意单个字…
阅读更多...
YOLOv8 上手体验

YOLOv8 上手体验

Yooooooo&#x1f387; &#x1f96a;环境搭建⚡注意&#x1f4a1;CUDAPyTorch&#x1f4a1;ultralytics &#x1f9aa;食用&#x1f4a1;cmd&#x1f4a1;Python &#x1f372;导出官方模型到本地 &#x1f96a;环境搭建 ⚡注意 Python>3.8 PyTorch>1.8 &#x1f4a1;C…
阅读更多...
2023-12-30 AIGC-LangChain指南-打造LLM的垂域AI框架

2023-12-30 AIGC-LangChain指南-打造LLM的垂域AI框架

摘要: 2023-12-30 AIGC-LangChain指南-打造LLM的垂域AI框架 LangChain指南-打造LLM的垂域AI框架 CHATGPT以来&#xff0c;Langchain 可能是目前在 AI 领域中最热门的事物之一&#xff0c;仅次于向量数据库。 它是一个框架&#xff0c;用于在大型语言模型上开发应用程序&#…
阅读更多...
数据库原理与应用快速复习（期末急救）

数据库原理与应用快速复习（期末急救）

文章目录 第一章数据库系统概述数据、数据库、数据库管理系统、数据定义、数据组织、存储和管理、数据操纵功能、数据库系统的构成数据管理功能、数据库管理的3个阶段以及特点数据库的特点、共享、独立、DBMS数据控制功能数据库的特点 数据模型两类数据模型、逻辑模型主要包括什…
阅读更多...
每日一题——LeetCode961

每日一题——LeetCode961

方法一 排序法&#xff1a; 2*n长度的数组里面有一个元素重复了n次&#xff0c;那么将数组排序&#xff0c;求出排序后数组的中间值&#xff08;因为长度是偶数&#xff0c;没有刚好的中间值&#xff0c;默认求的中间值是偏左边的那个&#xff09;那么共有三种情况&#xff1a;…
阅读更多...
【JavaEE进阶】 @RequestMapping注解

【JavaEE进阶】 @RequestMapping注解

文章目录 &#x1f384;什么是RequestMapping 注解&#x1f333;RequestMapping 使⽤&#x1f332;RequestMapping 是GET还是POST请求&#xff1f;&#x1f6a9;使用Postman构造POST请求 ⭕总结 &#x1f384;什么是RequestMapping 注解 在Spring MVC 中使⽤ RequestMapping 来…
阅读更多...
EasyNTS端口穿透服务新版本发布 0.8.7 增加隧道流量总数记录，可以知晓设备哪个端口耗费流量了

EasyNTS端口穿透服务新版本发布 0.8.7 增加隧道流量总数记录，可以知晓设备哪个端口耗费流量了

EasyNTS上云平台可通过远程访问内网应用&#xff0c;包含网络桥接、云端运维、视频直播等功能&#xff0c;极大地解决了现场无固定IP、端口不开放、系统权限不开放等问题。平台可提供一站式上云服务&#xff0c;提供直播上云、设备上云、业务上云、运维上云服务&#xff0c;承上…
阅读更多...
m3u8网络视频文件下载方法

m3u8网络视频文件下载方法

在windows下&#xff0c;使用命令行cmd的命令下载m3u8视频文件并保存为mp4文件。 1.下载ffmpeg&#xff0c;访问FFmpeg官方网站&#xff1a;https://www.ffmpeg.org/进行下载 ffmpeg下载&#xff0c;安装&#xff0c;操作说明 https://blog.csdn.net/m0_53157282/article/det…
阅读更多...
用通俗易懂的方式讲解大模型：使用 FastChat 部署 LLM 的体验太爽了

用通俗易懂的方式讲解大模型：使用 FastChat 部署 LLM 的体验太爽了

之前介绍了Langchain-Chatchat 项目的部署&#xff0c;该项目底层改用了 FastChat 来提供 LLM(大语言模型)的 API 服务。 出于好奇又研究了一下 FastChat&#xff0c;发现它的功能很强大&#xff0c;可以用来部署市面上大部分的 LLM 模型&#xff0c;可以将 LLM 部署为带有标准…
阅读更多...
精品Nodejs实现的校园疫情防控管理系统的设计与实现健康打卡

精品Nodejs实现的校园疫情防控管理系统的设计与实现健康打卡

《[含文档PPT源码等]精品Nodejs实现的校园疫情防控管理系统的设计与实现[包运行成功]》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 操作系统&#xff1a;Windows 10、Windows 7、Win…
阅读更多...
uniapp中uview组件库丰富的Calendar 日历用法

uniapp中uview组件库丰富的Calendar 日历用法

目录 基本使用 #日历模式 #单个日期模式 #多个日期模式 #日期范围模式 #自定义主题颜色 #自定义文案 #日期最大范围 #是否显示农历 #默认日期 基本使用 通过show绑定一个布尔变量用于打开或收起日历弹窗。通过mode参数指定选择日期模式&#xff0c;包含单选/多选/范围…
阅读更多...
gitlab 11.11.8的备份与恢复及500错误的修复

gitlab 11.11.8的备份与恢复及500错误的修复

gitlab已经集成了非常方便的备份和恢复命令&#xff0c;只要我们执行这些命令就能完成gitlab的备份与恢复了。 我想gitlab备份与恢复的目的无非就是将已经运行了很久的旧的gitlab服务&#xff0c;迁移到新的服务器上。如果你旧的gitlab上项目很少&#xff0c;就需要考虑迁移服…
阅读更多...
基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

基于ElementUI二次封装el-table与el-pagination分页组件[实际项目使用]

效果&#xff1a; 二次封装el-table组件 <template><div><!-- showHeader:是否显示头部size:表格的大小height:表格的高度isStripe:表格是否为斑马纹类型tableData:表格数据源isBorder:是否表格边框handleSelectionChange:行选中&#xff0c;多选内容发生变化回…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023