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

CSS id选择器

news 2026/5/16 17:23:54

目录

任务描述

相关知识

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

终极GitHub加速指南：如何免费将下载速度提升10倍以上

终极GitHub加速指南&#xff1a;如何免费将下载速度提升10倍以上 【免费下载链接】Fast-GitHub 国内Github下载很慢&#xff0c;用上了这个插件后&#xff0c;下载速度嗖嗖嗖的~&#xff01; 项目地址: https://gitcode.com/gh_mirrors/fa/Fast-GitHub 对于国内开发者来…...

编程新知 2026/5/16 17:00:57

不只是调色板：深入Cadence Allegro颜色配置文件的保存与复用逻辑（SPB17.4实战）

不只是调色板&#xff1a;深入Cadence Allegro颜色配置文件的保存与复用逻辑&#xff08;SPB17.4实战&#xff09; 在PCB设计领域&#xff0c;颜色配置往往被视为一种"视觉装饰"——直到某天你接手一个来自同事的工程文件&#xff0c;发现所有网络、层叠和元件都以难…...

编程新知 2026/5/16 16:48:52

3个步骤让你的外文漫画秒变中文：BallonsTranslator零门槛入门指南

3个步骤让你的外文漫画秒变中文&#xff1a;BallonsTranslator零门槛入门指南 【免费下载链接】BallonsTranslator 深度学习辅助漫画翻译工具, 支持一键机翻和简单的图像/文本编辑 | Yet another computer-aided comic/manga translation tool powered by deeplearning 项目地…...

编程新知 2026/5/16 15:26:34

从激光雷达到智能家居：深入浅出聊聊激光安全分类（Class 1/2/3/4）那点事儿

从激光雷达到智能家居&#xff1a;深入浅出聊聊激光安全分类&#xff08;Class 1/2/3/4&#xff09;那点事儿 激光技术正悄然渗透进我们生活的每个角落——从自动驾驶汽车的"眼睛"到智能门锁的指纹识别&#xff0c;从工业切割到医疗美容&#xff0c;这些看似毫不相关…...

编程新知 2026/5/16 14:47:37

明日方舟终极自动化助手：MAA智能辅助工具完整实战指南

明日方舟终极自动化助手&#xff1a;MAA智能辅助工具完整实战指南 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手&#xff0c;全日常一键长草&#xff01;| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: https://git…...

编程新知 2026/5/16 13:24:45

labelCloud架构解析：3D点云标注的模块化解决方案深度指南

labelCloud架构解析&#xff1a;3D点云标注的模块化解决方案深度指南 【免费下载链接】labelCloud A lightweight tool for labeling 3D bounding boxes in point clouds. 项目地址: https://gitcode.com/gh_mirrors/la/labelCloud 在3D计算机视觉和自动驾驶领域&#x…...

编程新知 2026/5/16 12:51:47

tchMaterial-parser：5分钟快速上手，轻松获取国家中小学智慧教育平台电子课本的完整指南

tchMaterial-parser&#xff1a;5分钟快速上手&#xff0c;轻松获取国家中小学智慧教育平台电子课本的完整指南 【免费下载链接】tchMaterial-parser 国家中小学智慧教育平台 电子课本下载工具&#xff0c;帮助您从智慧教育平台中获取电子课本的 PDF 文件网址并进行下载&#x…...

编程新知 2026/5/16 12:09:53

TranslucentTB：3分钟打造Windows任务栏透明效果的终极指南

TranslucentTB&#xff1a;3分钟打造Windows任务栏透明效果的终极指南 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 想让你的Windows桌…...

编程新知 2026/5/16 12:07:41

从“记录系统”到“智能系统” From “System of Record” to “System of Intelligence” —— A16Z

From “System of Record” to “System of Intelligence” 从“记录系统”到“智能系统” https://www.a16z.news/p/from-system-of-record-to-system-of Here’s one way you can think about system of record stickiness: For a long time, the valuable part of social…...

编程新知 2026/5/16 11:02:09

JiYuTrainer终极指南：三步解锁极域电子教室，恢复学习自由

JiYuTrainer终极指南&#xff1a;三步解锁极域电子教室&#xff0c;恢复学习自由 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 在数字化教学时代&#xff0c;极域电子教室为学生…...

编程新知 2026/5/16 10:42:59