div#header 和 div #header的区别

最新推荐文章于 2026-06-21 14:04:07 发布
转载 最新推荐文章于 2026-06-21 14:04:07 发布 · 1.9k 阅读 · 0 
<html>
<head>
<style type="text/css">
div#header
{
  background-color:green;
}
</style>
</head>
<body>
<div id="header">澳大利亚</div>
<div>中国</div>
</body>
</html>
复制代码

 

上面的例子中第1div的背景为green，而第2个div的背景还是白色。

div#header这个样式应用于标签为div且这个div的id为header

而div #header应用于标签div下面id为header的标签上

aa2635aaa
关注
H5中<header><footer><nav>与<div>的区别
YinghaoGuo的博客
04-28 1万+
区别就是没区别，在H5出现以后，主张语义化标签，、等html5的这几个标签都是收集了网上数百万网站上出现概率比较多的部分确定的，比如网站80%都会用页脚来声明版权等等。 相比于普通的标签，H5的一些新标签只是增强可读性，同时运行时，搜索引擎会在查找元素上更省时，看下面一段代码： .... .... ....
css详解
selean0621的专栏
08-21 568
#header             标题栏的ID，就是挂着空间名字的栏目#tab                  导航兰的ID，就是写着主页 | 博客 | 相册....的栏目#comm_info       其他模版的ID，就是有访问量显示和RSS的栏目#m_blog            文章列表模版的ID#m_pro              个人档案模版
【Vue教程六】插槽
qing_小诺的博客
07-15 1564
1、插槽内容 我们经常需要向一个组件传递内容，可以用 Vue 自定义的 <slot>元素： <body> <div id="app"> <alert-box> Something bad happened. </alert-box> </div> ...............
CSS选择器分类
疯魔coding君的博客
09-28 300
选择器 【掌握】 一、基本选择器【重点】 1.标签选择器 权值1 标签选择器: 利用标签名称做为选择器的名称,可以选择页面上的一种标签 格式: 标签名 <style type="text/css"> p { color: red; } div { color: red; } </style> 2.ID选择器 权值100 ID选择器: 选择页面上唯一的标签， 格式: #id属性的值 <style type="text/css"&gt
jQuery包装集本质解析：从链式调用到DOM集合管理
diedangxiang4092的博客
06-14 401
jQuery包装集是jQuery框架的核心抽象，它既非原生DOM节点，也非标准JavaScript数组，而是一个专为批量DOM操作设计的代理容器。其原理在于封装DOM节点集合，提供统一、安全、可预测的方法接口，支撑链式调用与上下文隔离。技术价值体现在批量一致性（如.hide()对单/多元素行为一致）、方法链安全性（.find().addClass().show()每步返回新包装集）及调试友好性（selector、prevObject等元信息）。典型应用场景包括动态菜单高亮、轮播图状态管理、表单元素批量校验等
CSS选择器本质：从地址簿原理到工程化选型指南
最新发布
abc20899的专栏
06-21 414
CSS选择器是样式与DOM结构之间的映射机制，其核心在于精准定位而非语法堆砌。理解类型、类、ID、属性及伪类选择器的匹配原理，能规避外边距合并、层叠冲突、动态内容失效等高频问题。技术价值体现在提升样式可维护性、降低JS耦合度，并支撑组件化与响应式开发。典型应用场景包括富文本样式统一、状态驱动UI（如data-status）、第三方SDK隔离、父元素条件样式（:has）等。本文基于真实项目决策树，系统拆解如何根据HTML可控性、复用需求与长期演进，科学选用最简且鲁棒的选择器方案。
Html笔记-头部标签+主体标签+尾部标签+div标签
LucKaren的博客
09-22 2878
当 article 内嵌 article 的时候，内部的 article 的内容是和外层的 article 内容是有相关性的。中时，就可以使用section，所以section可以作为除头部区域，尾部区域之外的主体内容，三者都是在主体(body)中使用！header：定义一个页面，区域或者文档的页眉(头部内容),里面包含标题，logo等内容，header标签相当于导航栏。是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容。
表头插槽使用#header，不能使用slot=“header”
活宝小娜的博客
09-06 725
表头插槽使用#header，不能使用slot=“header”
HTML5基本标签使用header，nav和footer
张晨光老师的播客
05-06 6691
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下： #nav{ padding: 10px ... } #header{ padding: 10px ... } #footer{ padding: 10px ... } 定义完之后呢，...
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
DIV标签详细介绍
qq_37219446的博客
08-09 3万+
div 是 division 的简写，division 意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。...
web实验二
zj5566778899的博客
04-25 700
【实验目的与要求】 1．理解网页内容和表现的分离； 2．熟悉CSS的基本语法和格式； 3．了解页面常用布局结构； 4. 学会用CSS+DIV布局制作一个博客页面。 【实验内容】 结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。要求： （1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用foo
CSS——选择器
学而不思则忘
08-04 462
CSS中主要存在三种选择器，分别为标签选择器，类选择器和id选择器。 以下面一段HTML代码为例： <body> <header> <h1 class="red" id="title">Title</h1> </header> <section> <h1 class...
Html-DW（3）div & css 设计head
limaning的专栏
09-21 814
Html代码：         左上            右上            底下         main.css代码： #header_t_l{width:80px;height:80px;background-color:#00F;float:left} #header_t_r{width:848px;height:80px;background-col
【2024】前端学习笔记6-容器标签div
皮皮的博客
09-15 868
div标签的基本用法
DIV的属性
weixin_30314813的博客
05-13 2245
一、常用属性 1、Height:设置DIV的高度；Width:设置DIV的宽度。 2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left] 可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距...
三栏布局
聪明绝顶的你与即将秃头的我
10-05 376
圣杯布局： 左、右栏固定。中间自适应，而且中间需要优先加载。 确定的架构： <body> <header>头部</header> <div class="center">主区域</div> <div class="left">左区域</div> <div class="right">右区域</div> <footer>底部</...
grid-template-areas和grid-area
frank_fong的博客
03-21 2168
&lt;!doctype html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;grid&lt;/title&gt; &lt;style&gt; /* grid-template-areas */ .container1 { dis
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值