DIVCSS的class和id的区别

麦田2年前 (2020-05-18)工作笔记262

网页中,常见的是div class,有时也有div id,这两者有什么区别呢?


<div class="wrap">,对应的是.wrap

<div id="wrap">,对应的是#wrap

1、使用范围不同

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。


ID属性的操作类似于CLASS属性,ID属性的值在整篇文档中必须是唯一的。


一般来说,class的样式可能会影响到别的div;如果不想影响其他div,是唯一性的就使用id!


2、表示方法不同

CLASS类选择器以标志符 . 开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择英文句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语,标志符表示“带有类名的元素”。


ID选择器的标志符是散列符号 # ,标志符用来提醒浏览器接下来出现的是ID值。


3、DIV+CSS规范命名大全集合


外套 wrap ——————用于最外层


头部 header —————-用于头部


主要内容 main ————用于主体内容(中部)


左侧 main-left ————-左侧布局


右侧 main-right ———–右侧布局


导航条 nav —————–网页菜单导航条


内容 content —————用于网页中部主体


底部 footer —————–用于底部

相关文章

点击链接打开随机页面的代码

常规的HTML页面,点击链接、图片或者页码到下一页,比较沉闷,点击链接打开随机页面就不同。经过搜索和测试,以下代码可以用,而且很好用:<a href="#" onclick=...

整站下载软件推荐和使用经验

怎么下载整个网站?整站下载软件推荐、网站离线下载器、扒站工具、网站复制工具、仿站工具…我经常使用并推荐的整站下载软件是WinHTTrack:1、HTTrack Website CopierHTTrac...

分割线样式参考

分割线在网页中应用比较多,列举常规的分割线如下:1、最基础的分割线:<hr>或者<hr />,默认颜色是#9A9A9A,默认厚度是22、基础分割线:# 位置可选左右中,可选线条...

静态博客生成器大全和简评

根据静态博客生成器排行榜网站staticgen,将主流的程序列出如下,并简评备忘:第一名:Next.js,依赖Node.js,安装简单,一次安装成功,但是使用麻烦;第二名:Jekyll,安装简单,在深...

CSS字体大小单位介绍和转换对照表

css字体大小单位,常见的有px、em、rem,这三个的区别是:px是固定的像素,设置后无法为适应页面大小而改变,但实际上这是我经常使用的字体单位大小,设置后页面显示正常,不存在在手机中字体过小的问题...

CSS命名规则/CSS命令规范

按照规范命名CSS,更专业,更易于管理!头部:header内容:content/container尾部:footer导航:nav侧栏:sidebar栏目:column页面外围控制整体布局宽...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。