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

属性选择器

news 2026/3/30 3:43:44

1.[title]{background:yellow;}：所有带title标签设置成黄色    

2.div[class]{background:yellow;}：所有div中带class标签设置成黄色    

3.div[class=box1]{border:1px solid blue; }：div中包含class并且class=box1的设置成蓝边框

4. class^=b 以b开头的[title^=ab]{background-color: yellow;}，设置背景色黄色
    class$=b 以b结尾
    class*=b 包含b 

5.div[class~=box1]{border:1px solid blue;}，只要class里面包含box1的设置成蓝边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 属性选择器 [class,,] */div[class]{background:yellow;}p[class]{background:red;}/* div .box1 {} *//* 完全匹配 *//* div[class=box1]{border:1px solid blue;} *//* 包含就匹配 */div[class~=box1]{border:1px solid blue;}input[name]{background:yellow;}input[type=email]{background:red;}/* 模糊匹配class^=b 以这个开头的class$=b 以这个结尾class*=b 包含某个字符 */div[class*="1"],p[class*="1"]{color:green;}</style>
</head>
<body><div class="box1">div-11111</div><div class="box2">div-22222</div><div >div-33333</div><div class="box1">div-44444</div><div class="box1 box3">div-555555555555555</div><p class="p1">p-11111</p><p class="p2">p-22222</p><p >p-33333</p><div><h1>注册页面</h1>用户名：<input type="text" name="username"> <br>密码：<input type="password" name="password"><br>年龄<input type="number" name="age"><br>邮箱<input type="email"><br></div>
</body>
</html>

相关文章：

属性选择器

1.[title]{background:yellow;}&#xff1a;所有带title标签设置成黄色 2.div[class]{background:yellow;}&#xff1a;所有div中带class标签设置成黄色 3.div[classbox1]{border:1px solid blue; }&#xff1a;div中包含class并且classbox1的设置成蓝边框 4. class…...

编程日记 2024/4/1 4:33:06

软考 - 系统架构设计师 - 关系模型的完整性规则

前言 关系模型的完整性规则是一组用于确保关系数据库中数据的完整性和一致性的规则。这些规则定义了在关系数据库中如何存储、更新和查询数据&#xff0c;以保证数据的准确性和一致性。 详情 关系模型的完整性规则主要包括以下三类&#xff1a; 实体完整性规则 这是确保每个…...

编程日记 2024/4/1 4:31:03

写了几个难一点的sql

写了几个难一点的sql SELECT bn.id AS book_node_id, t.version_id, bn.textbook_id, s.id AS subject_id, s.stage_id, COUNT( CASE WHEN d.document_type_id 1 AND d.scope IS NULL AND p.document_id IS NOT NULL THEN 1 END ) AS type_1_count, COUNT( CASEWHEN d.docume…...

编程日记 2024/4/1 4:30:01

【JDK常用的API】包装类

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …...

编程日记 2024/4/1 4:29:00

Android Q（10）黑暗模式适配的实现

一、引言 随着 AndroidQ&#xff08;10&#xff09;的发布&#xff0c;黑暗模式成为了系统级别的特性。为了满足用户在不同环境下的使用需求&#xff0c;应用程序需要及时进行黑暗模式的适配。本文将详细介绍如何在 AndroidQ&#xff08;10&#xff09;上实现黑暗模式的适配&a…...

编程日记 2024/4/1 4:28:00

【git】git使用手册

目录 一 初始化 1.1 账号配置 1.2 ssh生成 1.2.1 配置ssh 1.2.2 测试SSH 1.3 初始化本地仓库并关联远程仓库 二 使用 2.1 上传 2.2 拉取 三 问题 3.1 关联失败 一 初始化 git的安装很简单,下载后大部分进行下一步完成即可----->地址: git工具下载 1.1 账号配置…...

编程日记 2024/4/1 4:24:57

unity中判断方向 用 KeyVertical ，KeyHorizontal 判断ui物体的 方向

float KeyVertical Input.GetAxis("Vertical"); float KeyHorizontal Input.GetAxis("Horizontal"); // 假设 UI 物体在竖直方向上为 Y 轴&#xff0c;水平方向上为 X 轴 Vector2 direction new Vector2(KeyHorizontal, KeyVertical); if (direction…...

编程日记 2024/4/1 4:19:52

前端a4纸尺寸转像素尺寸

前端必备工具推荐网站(免费图床、API和ChatAI等实用工具): http://luckycola.com.cn/ 一、a4纸张有多大 A4纸的尺寸是210mm297mm,也就是21.0cm29.7cm, A4纸尺寸转屏幕像素尺寸和屏幕分辨率有关,首先1英寸2.54cm, 如果屏幕DPI分辨率为72像素/英寸&#xff0c;换算一下&#xff…...

编程日记 2024/4/1 4:16:50

Android 中 调试和减少内存错误

Android 中 调试和减少内存错误 ASan 概述 官网连接&#xff1a; https://developer.android.com/ndk/guides/asan?hlzh-cn ASan API 27开始HWASan&#xff08;替换AScan&#xff09; 从 NDK r21 和 Android 10&#xff08;API 级别 29&#xff09;开始适用于 64 位 Arm 设…...

编程日记 2024/4/1 4:14:47

证券市场概述

证券市场 证券市场参与者证券发行市场&#xff08;一级市场&#xff09;证券发行方式&#xff08;按发行对象&#xff09;证券发行方式&#xff08;按有无中介&#xff09;证券交易市场&#xff08;二级市场&#xff09;证券交易所场外交易市场&#xff08;店头市场、柜台市场&…...

编程日记 2024/4/1 4:11:44

什么是数据结构

一、什么是数据结构 1.数据结构研究计算机数据间的关系 2.包括数据的逻辑结构和储存结构及其操作 数据的逻辑结构&#xff1a;表示数据运算之间的抽象关系 按每个元素可能具有的直接前趋数和后继数将逻辑结构分为“线性结构”和“非线性结构”两大类 数据的储存结构&#…...

编程日记 2024/4/1 4:10:43

基于springboot+vue实现的学校田径运动会管理系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…...

编程日记 2024/4/1 4:02:34

HarmonyOS 应用开发之FA模型绑定Stage模型ServiceExtensionAbility

本文介绍FA模型的三种应用组件如何绑定Stage模型的ServiceExtensionAbility组件。 PageAbility关联访问ServiceExtensionAbility PageAbility关联访问ServiceExtensionAbility和PageAbility关联访问ServiceAbility的方式完全相同。 import featureAbility from ohos.ability…...

编程日记 2024/4/1 4:01:33

Java 中的单例模式

引言&#xff1a; 在 Java 编程中&#xff0c;单例模式是一种常见的设计模式&#xff0c;它保证一个类只能创建一个实例&#xff0c;并提供一个全局访问点。单例模式在很多场景下都非常有用&#xff0c;比如线程池、日志系统、数据库连接池等。本文将详细介绍 Java 中单例模式的…...

编程日记 2024/4/1 4:00:32

鸿蒙OS开发实例：【ArkTS类库多线程I/O密集型任务开发】

使用异步并发可以解决单次I/O任务阻塞的问题&#xff0c;但是如果遇到I/O密集型任务&#xff0c;同样会阻塞线程中其它任务的执行&#xff0c;这时需要使用多线程并发能力来进行解决。 I/O密集型任务的性能重点通常不在于CPU的处理能力&#xff0c;而在于I/O操作的速度和效率。…...

编程日记 2024/4/1 3:59:31

OpenStack部署

目录 一、安装环境 1.无网络使用该命令 2.修改主机名 3.配置hosts解析 4.配置本机免密 5.关闭防火墙和SElinux策略 6.关闭NewworkManager 7.修改yum源 7.1下载阿里源 7.2清空并加载缓存yum源 8.安装基本工具 9.系统升级 10.安装OPenStack的yum仓库 11.修改OPenSt…...

编程日记 2024/4/1 3:57:29

Java中的多线程和线程安全问题

线程 线程是操作系统进行调度的最小单位。一个进程至少包含一个主线程&#xff0c;而一个线程可以启动多个子线程。线程之间共享进程的资源&#xff0c;但也有自己的局部变量。多线程程序和普通程序的区别&#xff1a;每个线程都是一个独立的执行流&#xff1b;多个线程之间是…...

编程日记 2024/4/1 3:53:23

java Web会议信息管理系统 用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 jsp 会议信息管理系统是一套完善的web设计系统&#xff0c;对理解JSP java SERLVET mvc编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&am…...

编程日记 2024/4/1 3:50:21

lock4j学习记录

一种简单的&#xff0c;支持不同方案的高性能分布式锁 简介 lock4j是一个分布式锁组件&#xff0c;其提供了多种不同的支持以满足不同性能和环境的需求。 立志打造一个简单但富有内涵的分布式锁组件。 特性 简单易用&#xff0c;功能强大&#xff0c;扩展性强。支持redis…...

编程日记 2024/4/1 3:46:16

【C++庖丁解牛】自平衡二叉搜索树--AVL树

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1 AVL树的概念2. AVL…...

编程日记 2024/4/1 3:45:15

DownKyi：B站视频高效解决方案——如何三步搞定8K资源本地化管理

DownKyi&#xff1a;B站视频高效解决方案——如何三步搞定8K资源本地化管理 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印…...

编程新知 2026/3/30 3:08:43

告别激光雷达？手把手教你用CRN低成本实现BEV 3D感知（附PyTorch代码）

低成本BEV 3D感知实战&#xff1a;用CRN实现相机-雷达融合&#xff08;附完整PyTorch代码&#xff09; 在自动驾驶和机器人领域&#xff0c;3D环境感知一直是核心技术瓶颈。传统激光雷达方案虽精度高&#xff0c;但成本动辄数万元&#xff0c;且受天气影响显著。我们团队经过半…...

编程新知 2026/3/30 2:36:35

Kylin V10 SP1桌面美化全攻略：从默认主题到个性化定制，让你的麒麟系统焕然一新

Kylin V10 SP1桌面美学革命&#xff1a;打造高效与美感兼具的麒麟系统工作空间 第一次打开Kylin V10 SP1系统时&#xff0c;那个默认的"寻光"主题确实给人一种清新简洁的感觉。但日复一日面对相同的界面&#xff0c;就像每天穿着同样的衣服上班——功能上没问题&…...

编程新知 2026/3/30 2:24:33

避坑指南：用conda一键搞定gymnasium[box2d]安装（附常见错误解决方案）

Conda环境下的gymnasium[box2d]高效安装与疑难排解全攻略 强化学习实践者常会遇到一个令人头疼的问题&#xff1a;在Windows系统上安装gymnasium[box2d]时&#xff0c;总是遭遇各种编译错误和依赖问题。本文将带你彻底解决这个痛点&#xff0c;通过conda环境管理工具&#xff0…...

编程新知 2026/3/30 2:04:27

电子工程师的技术洁癖与嵌入式开发实践

1. 电子工程师的职业习惯与技术洁癖 1.1 工程师的强迫症表现 在电子工程领域&#xff0c;许多从业者都表现出典型的"技术洁癖"特征。这种职业习惯主要体现在以下几个方面&#xff1a; 元器件布局强迫症 &#xff1a;PCB板上电阻、电容等元件的焊盘必须对齐&#x…...

编程新知 2026/3/30 2:00:26

DLSS版本管理与性能优化：智能驱动游戏体验升级的开源解决方案

DLSS版本管理与性能优化&#xff1a;智能驱动游戏体验升级的开源解决方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 当RTX 4090显卡遇上《赛博朋克2077》最新DLSS&#xff08;深度学习超级采样&#xff09;版本&a…...

编程新知 2026/3/30 0:59:47

用Python+OpenCV实现双目相机三维重建：从标定到triangulatePoints的完整流程

PythonOpenCV双目三维重建实战&#xff1a;从标定到点云生成的完整指南 当你第一次看到双目相机生成的彩色点云在屏幕上缓缓旋转时&#xff0c;那种震撼感难以言表。两个普通的USB摄像头&#xff0c;经过精确标定和算法处理&#xff0c;竟能重建出真实世界的三维结构。本文将带…...

编程新知 2026/3/30 0:41:44

从零开始搭建自己的POC库：GitHub爬取+本地管理全攻略

从零构建个人POC武器库&#xff1a;自动化采集与智能管理实战指南 在漏洞研究和渗透测试领域&#xff0c;拥有一个组织良好的POC&#xff08;Proof of Concept&#xff09;库就像战士拥有趁手的武器。本文将带你从零开始&#xff0c;通过自动化工具和系统化方法&#xff0c;打造…...

编程新知 2026/3/30 0:33:43

PX4 OFFBOARD模式实战：手把手教你用C++代码让无人机自主起飞（附心跳包避坑指南）

PX4 OFFBOARD模式深度实战&#xff1a;从心跳包机制到三维轨迹控制的完整实现 当你的无人机在OFFBOARD模式下突然失控坠落&#xff0c;或者莫名其妙地退出自主控制模式时&#xff0c;是否曾怀疑过自己的代码逻辑&#xff1f;这些问题往往源于对PX4底层通信机制理解不够深入。本…...

编程新知 2026/3/30 0:27:42

告别回调地狱：用Qt信号与槽重构你的第一个GUI应用（Qt6/C++实战）

重构GUI应用&#xff1a;Qt信号与槽的工程化实践 在传统C GUI开发中&#xff0c;我们常常陷入回调函数嵌套的泥潭——按钮点击触发事件处理函数&#xff0c;函数内部又调用其他模块&#xff0c;最终形成难以维护的"面条式代码"。Qt的信号与槽机制为这一困境提供了优雅…...

编程新知 2026/3/29 23:45:19