牛商网做的网站怎么样/seo查询软件

牛商网做的网站怎么样,seo查询软件,学网站建设需要多长时间,wordpress判断手机目录 一、介绍二、常用种类三、案例实现案例一:a标签使用link/visited/hover/active案例二:表单元素使用focus/disabled案例三、通过其余伪类实现元素灵活选中 一、介绍 CSS 伪类(Pseudo-classes) 用于定义元素的特定状态或结构位…

目录

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

一、介绍

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

/* 举例 */
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>.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>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>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>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>.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.mzph.cn/pingmian/72661.shtml

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

相关文章

Ubuntu22.04虚拟机里安装Yolov8流程

1. 安装pytorch sudo apt install nvidia-cuda-toolkit nvcc --version # 官方适配地址&#xff1a;https://download.pytorch.org/whl/torch/import torch print(torch.__version__) print(torch.cuda.is_available())2. 安装环境 # cuDNN 安装&#xff1a;https://develop…

Spring 声明式事务管理

Spring 编程的方式实现事务管理&#xff0c;这样太过麻烦&#xff0c;需要在每个方法上面加上相应的事务处理操作&#xff0c;声明式事务处理能够很好的解决这个问题&#xff0c;比如通过tx命名空间&#xff0c;这样只需要配置就可以检测到相关的方法&#xff0c;或者是通过tra…

Chat2DB:让数据库管理像聊天一样简单

数据库工具的痛点与破局 在数据爆炸的时代&#xff0c;数据库管理工具已成为企业高效运营的刚需。然而&#xff0c;传统工具如Navicat、DBeaver虽功能强大&#xff0c;却让非技术人员和SQL新手望而却步。复杂的界面、繁琐的手动操作、晦涩的语法规则&#xff0c;成为横亘在数据…

Navicat for Snowflake 震撼首发,激活数据仓库管理全新动能

近日&#xff0c;Navicat 家族迎来了一位全新成员 — Navicat for Snowflake。Snowflake 是一款基于云架构的现代数据仓库解决方案&#xff0c;以其弹性扩展、高性能和易用性著称。这次首发的Navicat for Snowflake 专为简化 Snowflake 数据库管理任务而精心打造。它凭借其直观…

【项目合集】智能语音小车-微信小程序控制

功能需求&#xff1a; 车子检测环境温度、湿度&#xff0c;上报 APP、WEB 端显示实时数据可通过 APP 控制小车前进、左转、右转可通过语音控制小车前进后退车上一个 LED 灯&#xff0c;可通过 WEB、小程序控制在 APP、WEB 上均可注册登录 硬件清单 硬件 功能 备注 ESP32 …

人工智能与人的智能,改变一生的思维模型分享【4】决策树

决策树&#xff08; DECISION TREE&#xff09; 一般由一个决策图和若干可能的结果组成。是一种通过罗列解题的关键步骤以及各步骤发生的条件和结果&#xff0c;由此来创建到达目标的规划。 我们很早就知道有一个方法&#xff0c;叫做当你苦闷、纠结的时候&#xff0c;把你的所…

利用余弦相似度在大量文章中找出抄袭的文章

我前面的2篇文章分别讲了如果利用余弦相似度来判断2篇文章的相似度&#xff0c;来确定文章是否存在抄袭&#xff0c;和余弦相似度的原理&#xff0c;即余弦相似度到底是怎么来判断文章的相似性高低的等等。这一篇再说下&#xff0c;对于文章字数多和大量文章时&#xff0c;如果…

设计模式-对象创建

对象创建 前言1. Factory Method1.1 模式介绍1.2 模式代码1.2.1 问题代码1.2.2 重构代码 1.3 模式类图1.4 要点总结 2. Abstract Factory2.1 模式介绍2.2 模式代码2.2.1 问题代码2.2.2 重构代码 2.3 模式类图2.4 要点总结 3. Prototype3.1 模式介绍3.2 模式代码3.3 模式类图3.4…

SQLAlchemy系列教程:批量插入数据

高效地批量插入数据对于应用程序的性能至关重要。SQLAlchemy为批处理操作提供了几种机制&#xff0c;可以最大限度地减少开销并加快数据库事务时间。在本指南中&#xff0c;我们将探讨如何使用SQLAlchemy执行批量插入&#xff0c;包括从基础技术到高级技术。 搭建环境 在开始之…

openEuler系统迁移 Docker 数据目录到 /home,解决Docker 临时文件占用大问题

根据错误信息 write /var/lib/docker/tmp/...: no space left on device&#xff0c;问题的根源是 根分区&#xff08;/&#xff09;的磁盘空间不足&#xff0c;而非 /home 分区的问题。以下是详细解释和解决方案&#xff1a; 问题原因分析 Docker 临时文件占用根分区空间&…

Matlab 四分之一车辆被动悬架和模糊pid控制对比

1、内容简介 Matlab 183-四分之一车辆被动悬架和模糊pid控制对比 可以交流、咨询、答疑 2、内容说明 略 3.1 车辆多自由度模型建立 对于车辆动力学&#xff0c;一般都是研究其悬架系统&#xff0c;悬架系统由轮胎&#xff0c;轮胎空气&#xff0c;弹簧&#xff0c;减震器和…

LabVIEW旋转设备状态在线监测系统

为了提高大型旋转设备如电机和水泵的监控效率和故障诊断能力&#xff0c;用LabVIEW软件开发了一套实时监测与故障诊断系统。该系统集成了趋势分析、振动数据处理等多项功能&#xff0c;可实时分析电机电流、压力、温度及振动数据&#xff0c;以早期识别和预报故障。 ​ 项目背…

跟网型逆变器小干扰稳定性分析与控制策略优化simulink仿真模型和代码(包含完整仿真报告)

关注&#xff1a;“电击小子程高兴的MATLAB小屋”获取巨额优惠 1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2016Rb&#xff09;软件。建议采用matlab2016 Rb及以上版本打开。&#xff08;若需要其他版本可联系代为转换&#xff09; 近年来&#xff0c…

基于SpringBoot的“城市公交查询系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“城市公交查询系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 系统首页界面 用户登录界面 公…

框架源码私享笔记(02)Mybatis核心框架原理 | 一条SQL透析核心组件功能特性

最近在思考一个问题&#xff1a;如何能够更好的分享主流框架源码学习笔记&#xff08;主要是源码部分&#xff09;?让有缘刷到的同学既可以有所收获&#xff0c;还能保持对相关技术架构探讨学习热情和兴趣。以及自己也保持较高的分享热情和动力。 今天尝试用一个SQL查询作为引…

windows协议不再续签,华为再无windows可用,将于四月发布鸿蒙PC

大家好&#xff0c;我是国货系创始人张云泽&#xff0c;最近不少小伙伴在后台问&#xff1a;“听说Windows协议要到期了&#xff1f;我的电脑会不会变砖&#xff1f;”还有人说&#xff1a;“华为笔记本以后用不了Windows了&#xff1f;鸿蒙系统能用吗&#xff1f;”今天咱们就…

关于Redis的集群(上)

目录 基本概念 数据分片算法 哈希求余 ​编辑一致性哈希算法 哈希槽分区算法 搭建集群环境 创建目录和配置 编写 docker-compose.yml 启动容器 构建集群 基本概念 广义的集群&#xff0c;只要是多个机器构成了分布式系统&#xff0c;都可以成为是一个“集群”。 但…

【CSS3】化神篇

目录 平面转换平移旋转改变旋转原点多重转换缩放倾斜 渐变线性渐变径向渐变 空间转换平移视距旋转立体呈现缩放 动画使现步骤animation 复合属性animation 属性拆分逐帧动画多组动画 平面转换 作用&#xff1a;为元素添加动态效果&#xff0c;一般与过渡配合使用 概念&#x…

Java 线程创建全解析:五种方式详细对比与实战示例

目录 Java 线程创建全解析&#xff1a;五种方式详细对比与实战示例一、引言二、创建线程的五种方式1. 继承 Thread 类2. 实现 Runnable 接口3. 匿名内部类实现 Thread4. 匿名内部类实现 Runnable5. 使用 Lambda 表达式&#xff08;Java 8及以上&#xff09; 三、线程创建方式对…

EDAS:投稿经验-word版本-问题解决

1. 字体不对&#xff0c;字体未嵌入问题 问题&#xff1a;word转PDF后&#xff0c;总是显示有字体格式不对&#xff08;忘记截图了&#xff09;。 办法&#xff1a;1. EDAS投稿PDF格式问题-CSDN博客-PDF上修改 IEEE论文检测的字体未嵌入问题Times New Ro…