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

CSS id选择器

news 文章来源：https://blog.csdn.net/m0_73614626/article/details/139585129 2025/1/12 1:54:12

目录

任务描述

相关知识

id选择器

id选择器语法

类选择器与id选择器的区别

编程要求

任务描述

在本关中，你将通过id选择器的方式完成页面菜单栏样式布局，栏目导航等任务。

完成任务之后，基本页面效果如下：

动态效果如下：

相关知识

id选择器

id选择器与我们上一关中学习的类选择器类似，但在使用上有不同。

使用类选择器时，指定一个元素属于某类，使用的是关键字class，例如:

<body><h1 class="important">温馨提示</h1><p>少一串脚印，多一份绿意。</p>
</body>

而在使用id选择器时，使用的是关键字id。对于上面类选择器的例子，用id选择器书写：

<body><h1 id="important">温馨提示</h1><p>少一串脚印，多一份绿意。</p>
</body>

在样式表中，指定对应id名元素的样式，使用#符号，也称为棋盘号或井号。

#important {color: red;font-weight: bold;
}

样式应用效果如图：

id选择器语法

同理，我们可以看出，id选择器的语法规则如下：

  1. 首先，将html中想要应用类样式的元素，指定id名。

    1. <元素名 id="指定的类名"></元素名>
    2. <元素名 id="指定的类名">

  2. 然后，书写相应类的样式。

    1. #指定的类名 {样式声明}

类选择器与id选择器的区别

类选择器与id选择器类似，那么它们的区别是什么呢？什么情况下应该使用哪一种选择器呢？

它们最大的区别在于，在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。

一般情况下，都推荐使用类选择器。而在一些特定情况下，我们才会建议使用id选择器。例如，通过id选择器在页面中定义锚，在编写 JavaScript 为指定的页面元素应用特殊行为时。

编程要求

  • 为header元素添加名为menu的id；

  • 使用id选择器，设置精选(#chosen)标题为红色(red)，时事( #news)标题为蓝色(blue)，财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green)，生活(#life)标题为橘色(orange)。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>ID选择器</title><style type="text/css">/* 元素选择器 */html {background-color: #F0F0F0;}header {padding: 40px;background-color: white;}footer {margin-top: 20px;font-size: 0.6em;color: grey;}/* 类选择器 */.main {margin: 10px;}.newsSection {margin-top: 20px;padding: 20px;background-color: white;}/* ********** BEIGN ********** */#chosen {color: red;}#news {color: blue;}#finance {color: olive;}#think {color: green;}#life {color: orange;}/*选择menu元素下的li子元素*/#menu li {float: left;width: 70px;font-size: 1.2em;font-weight: lighter;}/*选择menu元素下的li子元素和li下得a子元素*/#menu li, li a {list-style: none;text-decoration: none;}/* ********** END ********** */</style>
</head>
<body>
<div class="main"><!-- ********** BEGIN ********** --><header id="menu"><!-- ********** END ********** --><li><a href="#chosen">精选</a></li><li><a href="#news">时事</a></li><li><a href="#finance">财政</a></li><li><a href="#think">思想</a></li><li><a href="#life">生活</a></li></header><div class="newsSection"><section><h2 id="chosen">精选</h2><li>精选新闻1</li><li>精选新闻2</li><li>精选新闻3</li></section><section><h2 id="news">时事</h2><li>时事新闻1</li><li>时事新闻2</li><li>时事新闻3</li></section><section><h2 id="finance">财政</h2><li>财政新闻1</li><li>财政新闻2</li><li>财政新闻3</li></section><section><h2 id="think">思想</h2><li>思想新闻1</li><li>思想新闻2</li><li>思想新闻3</li></section><section><h2 id="life">生活</h2><li>生活新闻1</li><li>生活新闻2</li><li>生活新闻3</li></section></div><footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div></body>
</html>

相关文章：

CSS id选择器

目录 任务描述 相关知识 id选择器 id选择器语法 类选择器与id选择器的区别 编程要求 任务描述 在本关中&#xff0c;你将通过id选择器的方式完成页面菜单栏样式布局&#xff0c;栏目导航等任务。 完成任务之后&#xff0c;基本页面效果如下&#xff1a; 动态效果如下&am…...

编程日记 2024/6/11 8:54:29

22.搭积木

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动，旨在激发青少年对学习人工智能与算法设计的热情与兴趣，提升青少年科学素养，引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/717 题目描述 小爱用积木搭起一座金字塔。为…...

编程日记 2024/6/11 8:53:28

手机投屏到电脑时，手机提示连接失败

前言 注意&#xff0c;本方法建立在你已经通过其他帖子等解决了前置条件的情况下&#xff0c;手机提示连接失败情况下&#xff0c;包括但不限于关闭防火墙、安装无线投屏工具、手机和电脑连接在同一个WiFi频段下、关闭杀毒软件等。 具体操作方法 1、请进入设置 > 系统和…...

编程日记 2024/6/11 8:51:25

软件测试--Mysql快速入门

文章目录 软件测试-mysql快速入门sql主要划分mysql常用的数据类型sql基本操作常用字段的约束&#xff1a;连接查询mysql内置函数存储过程视图事务索引 软件测试-mysql快速入门 sql主要划分 sql语言主要分为&#xff1a; DQL&#xff1a;数据查询语言&#xff0c;用于对数据进…...

编程日记 2024/6/11 8:48:21

什么是PV操作

PV操作是一种在操作系统中用于同步和互斥的机制，它基于信号量（Semaphore）的概念。在并发编程中，多个进程或线程可能会同时访问共享资源，PV操作可以用来确保这些访问是同步的，以防止竞态条件和数据不一致的问题。 PV操作包括两个原子操作： P操作（Proberen，测试）：这…...

编程日记 2024/6/11 8:47:20

差动放大器

差动器的出现是为了解决直接耦合电路存在的零点漂移问题&#xff0c;另外&#xff0c;差动放大器还有灵活的输入&#xff0c;输出方式。 一&#xff0c;基本差动放大器 差动放大器在电路结构上具有对称性&#xff0c;三极管VT1&#xff0c;VT2同型号&#xff0c;R1R2,R3R4,R5…...

编程日记 2024/6/11 8:45:18

【数据结构与算法 经典例题】括号匹配问题

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法 经典例题》C语言 期待您的关注 ​​ 目录 一、问题描述 二、解题思路 &#x1f343;破解之道 &#x1f343;…...

编程日记 2024/6/11 8:44:17

2024年6月最新开源电视影视TVAPP原生源码和后台管理平台源码及完整教程

本套源码为本人维护更新完善半年左右的还在使用开发的源码&#xff0c;与市面上倒卖的残次品不一样&#xff0c;没有可比性&#xff0c;向下兼容安卓4.0&#xff0c;向上兼容安卓13以上TV电视系统&#xff0c; 完全无闪退&#xff0c;弹窗报错&#xff0c;卡死、异常死循环残次…...

编程日记 2024/6/11 8:42:16

[大模型]GLM4-9B-chat Lora 微调

本节我们简要介绍如何基于 transformers、peft 等框架&#xff0c;对 LLaMA3-8B-Instruct 模型进行 Lora 微调。Lora 是一种高效微调方法&#xff0c;深入了解其原理可参见博客&#xff1a;知乎|深入浅出 Lora。 这个教程会在同目录下给大家提供一个 nodebook 文件&#xff0c…...

编程日记 2024/6/11 8:39:13

目标检测算法YOLOv9简介

YOLOv9由Chien-Yao Wang等人于2024年提出&#xff0c;论文名为&#xff1a;《YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information》&#xff0c;论文见&#xff1a;https://arxiv.org/pdf/2402.13616 &#xff1b;源码见: https://github.com/W…...

编程日记 2024/6/11 8:37:11

达梦数据库搭建守护集群

前言 DM 数据守护&#xff08;Data Watch&#xff09;是一种集成化的高可用、高性能数据库解决方案&#xff0c;是数据库异地容灾的首选方案。通过部署 DM 数据守护&#xff0c;可以在硬件故障&#xff08;如磁盘损坏&#xff09;、自然灾害&#xff08;地震、火灾&#xff09…...

编程日记 2024/6/11 8:34:09

OpenGL-ES 学习(6)---- Ubuntu OES 环境搭建

OpenGL-ES Ubuntu 环境搭建 此的方法在 ubuntu 和 deepin 上验证都可以成功搭建 目录 OpenGL-ES Ubuntu 环境搭建软件包安装第一个三角形基于 glfw 实现基于 X11 实现 软件包安装 sudo apt install libx11-dev sudo apt install libglfw3 libglfw3-dev sudo apt-get install…...

编程日记 2024/6/11 8:29:05

Django学习二：配置mysql，创建model实例，自动创建数据库表，对mysql数据库表已经创建好的进行直接操作和实验。

文章目录 前言一、项目初始化搭建1、创建项目&#xff1a;test_models_django2、创建应用app01 二、配置mysql三、创建model实例&#xff0c;自动创建数据库表1、创建对象User类2、执行命令 四、思考问题&#xff08;****&#xff09;1、是否会生成新表呢&#xff08;答案报错&…...

编程日记 2024/6/11 8:27:04

对象创建的4种模式

1. 工厂模式 这种模式抽象了创建具体对象的过程&#xff0c;用函数来封装以特定接口创建对象的细节 缺点&#xff1a;没有解决对象识别的问题&#xff08;即怎样知道一个对象的类型&#xff09; function createPerson(name, age, job) {var o new Object();o.name name;o.ag…...

编程日记 2024/6/11 8:26:03

如何判断 是否 需要 CSS 中的媒体查询

以下是一些常见的使用媒体查询的场景&#xff1a; 响应式布局&#xff1a;当设备的屏幕尺寸变化时&#xff0c;我们可以使用媒体查询来调整布局&#xff0c;以适应不同的屏幕尺寸。 设备特性适配&#xff1a;我们可以使用媒体查询来检测设备的特性&#xff0c;如设备方向、分辨…...

编程日记 2024/6/11 8:25:02

设计模式-装饰器模式（结构型）

装饰器模式 装饰器模式是一种结构模式&#xff0c;通过装饰器模式可以在不改变原有类结构的情况下向一个新对象添加新功能&#xff0c;是现有类的包装。 图解 角色 抽象组件&#xff1a;定义组件的抽象方法具体组件&#xff1a;实现组件的抽象方法抽象装饰器&#xff1a;实现…...

编程日记 2024/6/11 8:23:00

升级HarmonyOS 4.2，开启健康生活篇章

夏日来临&#xff0c;华为智能手表携 HarmonyOS 4.2 版本邀您体验&#xff0c;它不仅可以作为时尚单品搭配夏日绚丽服饰&#xff0c;还能充当你的健康管家&#xff0c;从而更了解自己的身体&#xff0c;开启智能健康生活篇章。 高血糖风险评估优化&#xff0c;健康监测更精准 …...

编程日记 2024/6/11 8:20:57

给gRPC增加负载均衡功能

在现代的分布式系统中&#xff0c;负载均衡是确保服务高可用性和性能的关键技术之一。而gRPC作为一种高性能的RPC框架&#xff0c;自然也支持负载均衡功能。本文将探讨如何为gRPC服务增加负载均衡功能&#xff0c;从而提高系统的性能和可扩展性。 什么是负载均衡&#xff1f; …...

编程日记 2024/6/11 8:19:55

【优选算法】详解target类求和问题（附总结）

目录 1.两数求和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 2.&#xff01;&#xff01;&#xff01;三数之和 题目 算法思路&#xff1a; 代码&#xff1a; 3.四数字和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 总结&易错点&…...

编程日记 2024/6/11 8:15:52

【数据结构】图论入门

引入 数据的逻辑结构&#xff1a; 集合&#xff1a;数据元素间除“同属于一个集合”外&#xff0c;无其他关系线性结构&#xff1a;一个对一个&#xff0c;例如&#xff1a;线性表、栈、队列树形结构&#xff1a;一个对多个&#xff0c;例如&#xff1a;树图形结构&#xff1…...

编程日记 2024/6/11 8:13:51

11_1 Linux NFS服务与触发挂载autofs

11_1 Linux NFS服务与触发挂载服务 文章目录 11_1 Linux NFS服务与触发挂载服务[toc]1. NFS服务基础1.1 示例 2. 触发挂载autofs2.1 触发挂载基础2.2 触发挂载进阶autofs与NFS 文件共享服务&#xff1a;scp、FTP、web&#xff08;httpd&#xff09;、NFS 1. NFS服务基础 Netwo…...

编程日记 2024/6/11 8:11:49

开发uniapp 小程序时遇到的问题

1、【微信开发者工具报错】routeDone with a webviewId XXX that is not the current page 解决方案: 在app.json 中添加 “lazyCodeLoading”: “requiredComponents” uniapp的话加到manifest.json下的mp-weixin 外部链接文章&#xff1a;解决方案文章1 解决方案文章2 &qu…...

编程日记 2024/6/11 8:10:46

怎样快速获取Vmware VCP 证书，线上考试，voucher报名优惠

之前考一个VCP证书&#xff0c;要花大一万的费用&#xff0c;可贵了&#xff0c;考试费不贵&#xff0c;贵就贵在培训费&#xff0c;要拿到证书&#xff0c;必须交培训费&#xff0c;即使vmware你玩的很溜&#xff0c;不需要再培训了&#xff0c;但是一笔贵到肉疼的培训费你得拿…...

编程日记 2024/6/11 8:09:45

LeetCode 1141, 134, 142

目录 1141. 查询近30天活跃用户数题目链接表要求知识点思路代码 134. 加油站题目链接标签普通版思路代码 简化版思路代码 142. 环形链表 II题目链接标签思路代码 1141. 查询近30天活跃用户数 题目链接 1141. 查询近30天活跃用户数 表 表Activity的字段为user_id&#xff0c…...

编程日记 2024/6/11 8:06:42

华为FPGA工程师面试题

FPGA工程师面试会涉及多个方面，包括基础知识、项目经验、编程能力、硬件调试和分析等。以下是一些必问的面试题： 基础知识题： 请解释FPGA的基本组成和工作原理。描述FPGA中的可编程互联资源以及它们在构建复杂数字电路中的作用。请解释嵌入式多用途块（如BRAM、DSP slices、…...

编程日记 2024/6/11 8:04:38

Windows11上安装docker（WSL2后端）和使用docker安装MySQL和达梦数据库

Windows11上安装docker&#xff08;WSL2后端&#xff09;和使用docker安装MySQL和达梦数据库 1. 操作系统环境2. 首先安装wsl2.1 关于wsl2.2 安装wsl2.3 查看可用的wsl2.4 安装ubuntu-22.042.5 查看、启动ubuntu-22.04应用2.6 上面安装开了daili2.7 wsl的更多参考 3. 下载Docke…...

编程日记 2024/6/11 8:03:37

UnityXR Interactable Toolkit如何实现Climb爬梯子

前言 在VR中，通常会有一些交互需要我们做爬梯子，爬墙的操作，之前用VRTK3时，里面是还有这个Demo的，最近看XRI，发现也除了一个爬的示例，今天我们就来讲解一下 如何在Unity中使用XR Interaction Toolkit实现爬行（Climb）操作 环境配置 步骤 1：设置XR环境 确保你的Uni…...

编程日记 2024/6/11 8:00:34

sqli-labs 靶场 less-11~14 第十一关、第十二关、第十三关、第十四关详解：联合注入、错误注入

SQLi-Labs是一个用于学习和练习SQL注入漏洞的开源应用程序。通过它&#xff0c;我们可以学习如何识别和利用不同类型的SQL注入漏洞&#xff0c;并了解如何修复和防范这些漏洞。Less 11 SQLI DUMB SERIES-11判断注入点 尝试在用户名这个字段实施注入,且试出SQL语句闭合方式为单…...

编程日记 2024/6/11 7:57:31

国内外网络安全现状分析

一、国内网络安全现状 1.1 国内网络安全威胁 国内的网络安全威胁主要表现在以下几个方面&#xff1a; 恶意软件&#xff1a;包括计算机病毒、蠕虫、木马和间谍软件等&#xff0c;它们能感染计算机系统、窃取敏感信息或破坏系统功能。网络钓鱼&#xff1a;通过伪装成可信任的…...

编程日记 2024/6/11 7:55:29

vscode copilot git commit 生成效果太差，用其他模型替换

问题 众所周知&#xff0c;copilot git commit 就像在随机生成 git commit 这种较为复杂的内容还是交给大模型做比较合适 方法 刚好&#xff0c;gitlens 最近开发了 AI commit的功能&#xff0c;其提供配置url api可以实现自定义模型 gitlens 只有3种模型可用&#xff1a…...

编程日记 2024/6/11 7:54:27

做游戏网站用什么系统做/百度模拟点击软件判刑了

thinkphp3.2.3(5以下)的addAll返回值问题thinkphp3.2.3(5以下)的addAll返回值问题[var1]我们都知道mysql支持一次插入多条数据&#xff0c;如下&#xff1a;以用户表user为例&#xff0c;表结构自增主键id、账号username、密码password。insert into user(username,password) v…...

编程日记 2025/1/11 20:44:40

网站优化建设绵阳/长春网站优化页面

442.数组中重复的数据442.数组中重复的数据题解代码442.数组中重复的数据 442.数组中重复的数据 题解 题目&#xff1a;给一个数组&#xff0c;返回数组中出现两次的数&#xff0c;数是1-n的&#xff0c;并且只出现一次或两次&#xff0c;要求常数的时间复杂度 思路&#x…...

编程日记 2025/1/11 16:51:16

高端网站建设创新/关键词挖掘站长工具

配置机器 hostname vi /etc/hostname 增加S1PA11 再执行 # hostname S1PA11 ---修改成功 打开hosts文件 并修改关联关系&#xff1a; 127.0.0.1 localhost.localdomain localhost ::1 localhost6.localdomain6 localhost6 增加下面两行 &#xff08;本地…...

编程日记 2025/1/11 13:22:05

wordpress自定义tag页面/网址收录入口

http://blog.csdn.net/yuedong56/article/details/21524557 Cornerstone是mac操作系统上一款比较流行的SVN版本管理工具。 如何恢复到某一版本呢&#xff1f; 1。选中你要恢复的工程 2.点击“Working Copy”--->>"Revert..."。 3. 选择你要恢复的版本号&…...

编程日记 2025/1/11 11:17:57

wordpress 产品模块/怎么建设自己的网站

1)jsp是简servlet编写的一种技术&#xff0c;它将Java代码&#xff08;一定是在服务器端执行&#xff0c;不是在客户端的浏览器那儿执行&#xff09;和html语句混在同一个文件中编写&#xff0c;只对网页中要动态产生的内容用Java代码来编写&#xff0c;而对固定不变的静态内容…...

编程日记 2025/1/11 9:55:06

wordpress图库主题/seo优化的优点

Intent&#xff08;意图&#xff09; 将一个复杂对象的构建&#xff08;construction&#xff09;与其表示&#xff08;representation&#xff09;分离&#xff0c;这样同样的构建过程可以创建出不同的表示。 Motivation&#xff08;动机&#xff09; 一个RTF&#xff08;R…...

编程日记 2025/1/11 8:08:04