CSS日常总结--CSS伪类

前言

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.hqwc.cn/news/309095.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

网络基础操作练习

网络基础操作练习

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 手把手教你操作华为设备&#xff0c;新手必看。 实验拓扑图 关于命令行视图 1&#xff09;用户视图 <Huawei> 2&#xff09;系统视图 [Hu…
阅读更多...
数字PID算法基础

数字PID算法基础

数字PID是由编程语言实现的PID算法并烧录到控制芯片中&#xff0c;控制芯片与电机驱动连接&#xff0c;将PID控制算法的输出转换为PWM控制信号发送给电机驱动电路&#xff0c;电机驱动电路与直流电机相连并将PWM控制信号转换为具有相同占空比的PWM供电电压&#xff0c;通过对输…
阅读更多...
数据库——简单查询复杂查询

数据库——简单查询复杂查询

1.实验内容及原理 1. 在 Windows 系统中安装 VMWare 虚拟机&#xff0c;在 VMWare 中安装 Ubuntu 系统,并在 Ubuntu 中搭建 LAMP 实验环境。 2. 使用 MySQL 进行一些基本操作&#xff1a; &#xff08;1&#xff09;登录 MySQL&#xff0c;在 MySQL 中创建用户&#xff0c;…
阅读更多...
AI又进化了，AI 写代码工具

AI又进化了，AI 写代码工具

今年 AI 的发展可谓一日千里&#xff0c;相信不少同学应该都用过 AI 来帮助自己提高开发效率吧&#xff1f; 比如让 AI 根据注释生成代码、解释整段代码、提供技术问题的答疑、修改 Bug、生成单元测试等等。 在 12 月 28 日刚刚结束的 WAVE SUMMIT 深度学习开发者大会上&…
阅读更多...
使用Halcon 采集图像并进行简单处理rgbl_to_gray/threshold/connection/fill_up

使用Halcon 采集图像并进行简单处理rgbl_to_gray/threshold/connection/fill_up

使用Halcon 采集图像并进行简单处理 文章目录 使用Halcon 采集图像并进行简单处理 下面介绍一个简单的采集图像的例子。在Halcon中利用图像采集接口&#xff0c;使用USB3.0相机实时拍摄图像。采集到图像后对图像进行简单的阀值分割处理&#xff0c;将有物体的区域标记出来。 &a…
阅读更多...
文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《面向平稳氢气需求的综合制氢系统鲁棒优化配置方法》

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《面向平稳氢气需求的综合制氢系统鲁棒优化配置方法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主的专栏栏目《论文与完整程序》 这个标题涉及到针对平稳氢气需求的综合制氢系统鲁棒优化配置方法。让我们逐步解读这个标题的关键要素&#xff1a; 面向平稳氢气需求&#xff1a; 这部分指…
阅读更多...
基于js和html的骰子游戏

基于js和html的骰子游戏

介绍&#xff1a; 1.游戏者选择“大”时&#xff0c;三个骰子点数之和为11-18时&#xff0c;游戏者获胜。2.游戏者选择“小”时&#xff0c;三个骰子点数之和为3-10时&#xff0c;游戏者获胜。3.如果游戏者选择具体点数&#xff0c;则根据三个骰子的点数计算&#xff0c;如果与…
阅读更多...
7.8子集（LC78-M）

7.8子集（LC78-M）

算法&#xff1a; 其实也是组合问题&#xff0c;还是用回溯。 与以前不同的是&#xff0c;如果把 子集问题、组合问题、分割问题都抽象为一棵树的话&#xff0c;那么组合问题和分割问题都是收集树的叶子节点&#xff0c;而子集问题是找树的所有节点&#xff01; 其实子集也是…
阅读更多...
什么是 SPI，它有什么用？

什么是 SPI，它有什么用？

文章目录 什么是 SPI&#xff0c;它有什么用&#xff1f; 什么是 SPI&#xff0c;它有什么用&#xff1f; SPI 全称是 Service Provider Interface &#xff0c;它是 JDK 内置的一种动态扩展点的实现。 简单来说&#xff0c;就是我们可以定义一个标准的接口&#xff0c;然后第三…
阅读更多...
【HTML5】第1章 HTML5入门

【HTML5】第1章 HTML5入门

学习目标 了解网页基本概念&#xff0c;能够说出网页的构成以及网页相关名词的含义 熟悉Web标准&#xff0c;能够归纳Web标准的构成。 了解浏览器&#xff0c;能够说出各主流浏览器的特点。 了解HTML5技术&#xff0c;能够知道HTML5发展历程、优势以及浏览器对HTML5的支持情…
阅读更多...
如何安装ubuntu kylin(优麒麟)系统

如何安装ubuntu kylin(优麒麟)系统

半个月前(2020-12-25)&#xff0c;优麒麟官方发布消息说&#xff0c;优麒麟与 CodeWeavers 公司积极合作适配&#xff0c;正式推出 CrossOver 优麒麟版本&#xff0c;使优麒麟系统能够兼容运行 Windows 应用。将微信(crossover版) 和 QQ(crossover版) 上架麒麟软件商店。 优麒…
阅读更多...
基于立锜RTQ7882，支持全协议及DP显示功能的PD快充方案

基于立锜RTQ7882，支持全协议及DP显示功能的PD快充方案

在上一篇文章【基于RTQ7882的车载PD快充方案 - 大大通 &#xff08;wpgdadatong.com&#xff09;】中&#xff0c;已经对立锜科技&#xff08;Richtek&#xff09;及主打产品RTQ7882的基本功能作了介绍。 本文将分享RTQ7882近期新增的功能&#xff0c;以及其Cost Down版本。 旨…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023