当前位置： 首页 > news >正文

web前端3.19

news 2026/4/1 10:09:34

一、属性选择器与伪类选择器

属性选择器：匹配那些具有特定属性或属性值的元素

<style>/*  */input[type="password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*="e"] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^="p"] {background-color: brown;}/* 属性值以什么结尾 */input[type$="t"] {background-color: red;}/* +表示的是下一个标签 */.box1+p {background-color: blue;}</style>

伪类选择器：添加到选择器的关键字，用于指定所选元素的特殊状态。

<style>/* 访问前 */a:link {color: red;}/* 访问后 */a:visited {color: chartreuse;}/* 鼠标悬停时 */a:hover {color: pink;}/* 鼠标点击时 */a:active {color: darkblue;}/* 需要按照lvha的顺序书写 */</style>

其他伪类：

    <style>ul li:nth-child(8) {background-color: pink;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: aqua;}ul li:first-child {background-color: aquamarine;}li:nth-of-type(3) {background-color: aqua;}</style>
</head><body><ul><li>我是一个li1</li><li>我是一个li2</li><p>我是一段文字</p><li>我是一个li3</li><li>我是一个li4</li><li>我是一个li5</li><li>我是一个li6</li><li>我是一个li7</li><li>我是一个li8</li><li>我是一个li9</li><li>我是一个li10</li><li>我是一个li11</li><p>我是一个段落</p></ul></body>

伪元素选择器：伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

<style>ul li::before {content: "66666";width: 10px;height: 10px;background-color: pink;}ul li::after {content: "----------------zhangsan";}/* 文字被选中时 */ul li::selection {background-color: pink;}</style>

二、文本修饰：

font：

 font-size: 12px;/*  */font-weight: 700;text-align: center;font-style: italic;/* 字体族 */font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;/* 让行高等于容器的高度，来实现单行文本的垂直居中  */line-height: 300px;/* 默认400是正常粗细，700是加粗字体   bold*//* font-weight: 400;    normal*/font-weight: bold;/* line-height: 40px; *//* font：style weight size/line-height family； */font: italic 700 30px/40px "微雅软黑";

文本缩进：text-indent: 2em;

文本装饰：

    /* 主要用于去除a链接的默认样式 */

            text-decoration: none;

颜色：

            /* background-color: aqua; *//* 关键字 */color: rgb(131, 13, 33);/* rgb函数（红、绿、蓝）三原色 *//* rgba函数（红、绿、蓝、透明度） */color: rgba(131, 13, 33, 0.3);/* 十六进制表示 */color: #00FFFF;

三、练习：五彩导航

本次选择用伪类选择器方法进行试验，则鼠标悬在上方时变色

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五彩导航</title><link rel="stylesheet" href="css1.css">
</head><body><div class="five"><a href="#" class="five1">五彩导航</a><a href="#" class="five2">五彩导航</a><a href="#" class="five3">五彩导航</a><a href="#" class="five4">五彩导航</a></div></body></html>

css:

.five a {display:inline-block;width: 120px;height: 58px;background-color:pink;text-align: center;line-height: 50px;color:aqua;
}
.five .five1:hover {background-color: yellow;
}
.five .five2:hover {background-color: purple;
}
.five .five3:hover {background-color:red;
}
.five .five4:hover {background-color: blue;
}

相关文章：

web前端3.19

一、属性选择器与伪类选择器 属性选择器&#xff1a;匹配那些具有特定属性或属性值的元素 <style>/* */input[type"password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */inpu…...

编程日记 2024/3/26 22:20:17

Rust 函数体内能定义数据类型或者做其他什么事情吗？

一、可以在函数体内定义数据类型吗&#xff1f; 在 Rust 中&#xff0c;你不能直接在函数体内定义新的数据类型&#xff08;如结构体或枚举&#xff09;。数据类型必须在模块或块的作用域内定义&#xff0c;这通常是在函数外部。然而&#xff0c;你可以在函数体内定义新的类型…...

编程日记 2024/3/26 22:19:15

flask_restful结合蓝图使用

在蓝图中&#xff0c;如果使用 Flask_RESTful &#xff0c; 创建 Api 对象的时候&#xff0c;传入蓝图对象即可&#xff0c;不再是传入 app 对象 /user/__init__.py from flask.blueprints import Blueprintuser_bp Blueprint(user,__name__)from user import views /user…...

编程日记 2024/3/26 22:17:13

干货分享之反射笔记

入门级笔记-反射 一、利用反射破泛型集合二、Student类三、获取构造器的演示和使用1.getConstructors只能获取当前运行时类的被public修饰的构造器2.getDeclaredConstructors:获取运行时类的全部修饰符的构造器3.获取指定的构造器3.1得到空构造器3.2得到两个参数的有参构造器&a…...

编程日记 2024/3/26 22:12:08

使用小皮【phpstudy】运行Vue+MySql项目

现在的情况是我扒到了一个开源的项目&#xff0c;现在想要实现一下前端对应的功能&#xff0c;后端是完备的&#xff0c;但是需要调用数据库将数据跑起来&#xff0c;这里可以使用到MySql数据库&#xff0c;这里我还发现了一个比较好用的软件小皮【phpStudy】 官网 一 安装软件…...

编程日记 2024/3/26 22:10:04

局部静态变量实现单例模式，线程安全（推荐使用）c++11

class Singleton{ public:~Singleton();static Singleton& getInstance(){static Singleton instance;return instance; } private:Singleton(); };原因是C 11标准中新增了一个特性叫Magic Static&#xff1a;如果变量在初始化时&#xff0c;并发线程同时进入到static声明语…...

编程日记 2024/3/26 22:02:57

Machine Learning机器学习之决策树算法 Decision Tree（附Python代码）

目录 前言&#xff1a; 一、决策树思想 二、经典决策树算法 三、算法应用案列 基于Python 和 Scikit-learn 库实现决策树算法的简单示例代码&#xff0c;用于解决分类问题&#xff1a; ​四、总结 算法 决策树算法应用&#xff1a; 决策树算法优缺点&#xff1a; 博主介绍&…...

编程日记 2024/3/26 22:01:56

Mybatis-Plus——09，代码自动生成器

代码自动生成器 一、先创建一个表二、创建一个类&#xff0c;配置代码生成器三、运行方法四、运行主方法&#xff0c;报错了。 一、先创建一个表 二、创建一个类&#xff0c;配置代码生成器 package com.gang;import com.baomidou.mybatisplus.annotation.DbType; import com.…...

编程日记 2024/3/26 22:00:55

Temu api接口 获取商品详情 数据采集

iDataRiver平台 https://www.idatariver.com/zh-cn/ 提供开箱即用的Temu电商数据采集API&#xff0c;供用户按需调用。 接口使用详情请参考Temu接口文档 接口列表 1. 获取商品详情 参数类型是否必填默认值示例值描述apikeystring是idr_***从控制台里复制apikeycountrystrin…...

编程日记 2024/3/26 21:58:52

安捷伦Agilent N1912A功率计

181/2461/8938产品概述&#xff1a; Keysight(原Agilent) N1912A P系列双通道功率计可提供峰值、峰均比、平均功率、上升时间、下降时间、最大功率值、最小功率值以及宽带信号的统计数据。 Keysight(原Agilent) N1912A P系列双通道功率计, 可提供峰值、峰均比、平均功率、上升…...

编程日记 2024/3/26 21:57:51

ES 进阶知识

索引Index 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&#xff0c;另一个产品目录的索引&#xff0c;还有一个订单数据的索引。一个索引由一个名字来标识&#xff08;必须全部是小写字母&#xff09;&#xff0c;并且当我们…...

编程日记 2024/3/26 21:56:50

ChatGPT 对 ELT的理解

本文主要内容来自 ChatGPT 4.0 到底什么是 ETL&#xff1f;在数据库内部&#xff0c;把数据从 ODS 层加工成 DWD&#xff0c;再加工成 DWS&#xff0c;这个过程和 ETL 的关系是什么&#xff1f;带着这些问题&#xff0c;我问了一下 ChatGPT&#xff0c;总结如下。 数据在两个数…...

编程日记 2024/3/26 21:55:49

qt事件机制学习笔记

实现闹钟功能 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget), speecher(new QTextToSpeech(this)) //给语音播报者实例化空间 {ui->setupUi(this); }Widget::~Widget() {delete …...

编程日记 2024/3/26 21:54:48

网红电商主播培养体系招聘管理制度孵化方案

【干货资料持续更新&#xff0c;以防走丢】 网红电商主播培养体系招聘管理制度孵化方案 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 共120页可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 主播团队组建方案 让好主播主动留下 1. 好主播选拔标准…...

编程日记 2024/3/26 21:49:43

Android获取经纬度的最佳实现方式

Android中获取定位信息的方式有很多种&#xff0c;系统自带的LocationManager&#xff0c;以及第三方厂商提供的一些定位sdk&#xff0c;都能帮助我们获取当前经纬度&#xff0c;但第三方厂商一般都需要申请相关的key&#xff0c;且调用量高时&#xff0c;还会产生资费问题。这…...

编程日记 2024/3/26 21:46:40

芒果YOLOv8改进137：主干篇CSPNeXt，小目标检测专用，COCO数据集验证，协调参数量和计算量的均衡，即插即用 | 打造高性能检测

该专栏完整目录链接： 芒果YOLOv8深度改进教程 芒果专栏 本篇基于 CSPNeXt 的改进结构，改进源码教程 | 详情如下🥇 本博客 CSPNeXt 改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 即插即用 结构，博客包括改进所需的 核心结构代码 文件 重点：🔥🔥🔥YOLOv8 …...

编程日记 2024/3/26 21:45:39

【测试开发学习历程】认识Python + 安装Python

目录 1 认识 Python 1.1 Python 的起源 1.2 Python的组成 1.2.1 解释器 1.1.2 Python 的设计目标 1.1.3 Python 的设计哲学 1.2 为什么选择 Python 测试人员选择Python的理由 1.3 Python 特点 面向对象的思维方式 1.4 Python 的优缺点 1.4.1 优点 1.4.2 缺点 3. 安…...

编程日记 2024/3/26 21:44:38

webpack proxy工作原理？为什么能解决跨域?

一、是什么 webpack proxy&#xff0c;即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题&#xff08;浏览器安全策略限制&#xff09; 想要实现代理首先需要一个中间服务器&#xff0c;webpac…...

编程日记 2024/3/26 21:43:37

ArkTS编写的HarmonyOS原生聊天UI框架

简介 ChatUI&#xff0c;是一个ArkTS编写的HarmonyOS原生聊天UI框架&#xff0c;提供了开箱即用的聊天对话组件。 下载安装 ohpm install changwei/chatuiOpenHarmony ohpm 环境配置等更多内容&#xff0c;请参考如何安装 OpenHarmony ohpm 包 接口和属性列表 接口列表 接…...

编程日记 2024/3/26 21:39:32

uni-app中web-view的使用

1. uni-app中web-view的使用 uni-app中的web-view是一个 web 浏览器组件&#xff0c;可以用来承载网页的容器&#xff0c;uni-app开发的app与web-view实现交互的方式相关简单&#xff0c;应用通过属性message绑定触发事件&#xff0c;然后在web-view的网页向应用 postMessage 触…...

编程日记 2024/3/26 21:38:31

ClickHouse数据报表实战：如何把分组后的明细‘压缩’成一行摘要（附完整SQL）

ClickHouse数据报表实战&#xff1a;高效聚合多行文本的工程化解决方案 在数据分析与报表生成的实际业务场景中&#xff0c;我们经常遇到这样的需求&#xff1a;需要将同一维度下的多条文本明细&#xff08;如用户行为日志、错误信息、月份列表等&#xff09;合并成一条简洁的摘…...

编程新知 2026/4/1 9:23:51

Fish Speech 1.5 Web界面保姆级教程：上传参考音频→文本对齐→语音生成全链路

Fish Speech 1.5 Web界面保姆级教程&#xff1a;上传参考音频→文本对齐→语音生成全链路 你是不是也想用AI生成和自己声音一模一样的语音&#xff1f;Fish Speech 1.5就能帮你实现这个愿望&#xff01;这个强大的语音合成工具不仅能生成自然流畅的语音&#xff0c;还能通过参…...

编程新知 2026/4/1 8:36:45

车企携手Tech Soft 3D：基于 HOOPS 工具集打造Web端一体化工程可视化解决方案

随着汽车行业向智能化、电动化转型&#xff0c;整车研发体系正在发生深刻变化。围绕多平台架构、跨区域协同以及供应链一体化&#xff0c;企业对于工程数据的使用方式提出了更高要求——不仅要“能管理”&#xff0c;更要“能流动、能协同”。 为推动核心工程系统向浏览器化、…...

编程新知 2026/4/1 7:49:43

Phi-4-mini-reasoning效果实测：在高考数学压轴题上的分步推导与结论匹配度

Phi-4-mini-reasoning效果实测&#xff1a;在高考数学压轴题上的分步推导与结论匹配度 1. 模型能力概述 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型&#xff0c;特别擅长处理需要多步逻辑推导的数学题和逻辑题。与通用聊天模型不同&#xff0c;它被设计为直接接…...

编程新知 2026/4/1 7:31:21

从‘硬’开关到‘软’启动：拆解一个经典PMOS缓启动电路，聊聊D4、D6这些二极管到底在忙啥？

从‘硬’开关到‘软’启动&#xff1a;拆解一个经典PMOS缓启动电路&#xff0c;聊聊D4、D6这些二极管到底在忙啥&#xff1f; 在硬件设计中&#xff0c;电源管理电路如同交响乐团的指挥&#xff0c;协调着各个器件的动作节奏。而缓启动电路&#xff0c;则是这位指挥手中那根至关…...

编程新知 2026/4/1 6:48:00

FileConverter：重构文件格式转换流程，实现设计师与教育工作者的效率突破

FileConverter&#xff1a;重构文件格式转换流程&#xff0c;实现设计师与教育工作者的效率突破 【免费下载链接】FileConverter File Converter is a very simple tool which allows you to convert and compress files using the context menu in windows explorer. 项目地…...

编程新知 2026/4/1 6:37:56

S2-Pro+C语言教学系统：代码逻辑讲解与典型错误自动纠正

S2-ProC语言教学系统&#xff1a;代码逻辑讲解与典型错误自动纠正 1. 智能编程助教初体验 第一次看到S2-Pro在C语言教学中的应用效果时&#xff0c;确实让人眼前一亮。想象一下&#xff0c;当学生提交一段指针运算代码后&#xff0c;系统不仅能指出错误&#xff0c;还能像经验…...

编程新知 2026/4/1 6:21:34

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程：从安装到运行

MiniCPM-V-2_6 Ubuntu 20.04一键部署教程&#xff1a;从安装到运行 想试试那个能看懂图片还能跟你聊天的多模态大模型MiniCPM-V-2_6吗&#xff1f;很多朋友在第一步——部署上就被卡住了&#xff0c;不是环境依赖搞不定&#xff0c;就是权限问题报错&#xff0c;折腾半天模型还…...

编程新知 2026/4/1 6:01:20

Vivado项目文件太多分不清？这份FPGA开发必备的‘文件后缀速查手册’请收好

Vivado项目文件管理终极指南&#xff1a;从后缀识别到高效工作流 当你第一次打开一个成熟的Vivado项目文件夹时&#xff0c;那种面对几十种陌生文件后缀的茫然感&#xff0c;相信每个FPGA开发者都记忆犹新。就像走进了一个满是神秘符号的仓库&#xff0c;每个文件似乎都在向你发…...

编程新知 2026/4/1 5:33:01

MIKE URBAN中污水处理厂如何进行概化

01 前言应用厂网一体化耦合模型研究水厂间调度和厂前溢流入河污染量等内容时&#xff0c;由于不需要关注污水处理厂内部的具体处理工艺&#xff0c;需要对污水处理厂的关键设施进行概化处理。02 水厂资料收集收集污水处理的工艺流程图和设施设计参数。依据厂网一体化模型的研究…...

编程新知 2026/4/1 3:51:38