当前位置: 首页 > article >正文

css的“id选择器“命名问题

项目场景:

工程里面,使用到了CSS的”id选择器",想让某个p标签的元素发生改变


问题描述

为什么每个p标签的元素,都发生了改变

<!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>
        #p1 {
            background-color: red;
        }
    </style>
</head>

<body>
    <p id="p1">1</p>
    <p id="p1">2</p>
    <p id="p1">3</p>
</body>

</html>

在这里插入图片描述


原因分析:

因为每个p标签,都使用了相同的id选择器,所以产生的效果是一样的


解决方案:

方案1:
不同的p标签,使用不同的id选择器

tips:
问:考虑一下,“id选择器”,可以共用吗?(多个标签使用一个"id选择器")
答:不行,"id选择器"就像是身份证一样,不能重复使用(代码里面虽然可以重复使用,也不报错,但是这样不符合规范)


http://www.kler.cn/a/287335.html

相关文章:

  • 【C/C++】Lambda 用法
  • .NET 简介
  • 【ARM】MDK在debug模式下的Registers窗口包含哪些内容
  • 浅谈数据仓库的架构及其演变
  • <项目代码>YOLOv8 番茄识别<目标检测>
  • MATLAB实现GARCH(广义自回归条件异方差)模型计算VaR(Value at Risk)
  • pytest自动化测试执行环境切换的两种解决方案
  • 深度学习系列74:语音中的mel谱
  • 通用文字识别API如何通过Java进行调用?(一)
  • Python知识点:如何使用Appium进行移动应用测试
  • Linux基础(包括centos7安装、linux基础命令、vi编辑器)
  • three.js 开发粒子系统
  • RCU概念
  • 【QNX+Android虚拟化方案】101 - Android GVM 虚拟网络 Virt-Net 配置
  • 数学基础 -- 线性代数之酉矩阵
  • git笔记 -- 日志搜索的方法
  • JAVA HttpUrlConnection 使用 GZIP 编码压缩
  • 学习如何更好向GPT提问
  • 从跟跑到领跑:AIGC时代国产游戏的崛起与展望
  • SpringCloud乐尚代驾学习笔记:项目概述(一)
  • prometheus download all
  • PMC如何建立有效的监控系统来及时发现生产计划的偏离?
  • git version 2.37.0 如何删除远程分支
  • 【单片机开发】单片机的烧录方式详解(ICP、IAP、ISP)
  • Datawhale X 李宏毅苹果书 AI夏令营 Task 3
  • 介绍一下KAFKA的ACK机制?