ID选择器和类选择器的合理使用
一.什么是ID选择器和类选择器
作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器</title> 6 <style type="text/css"> 7 #box{ 8 background-color: #0000FF; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="box"></div> 14 </body> 15 </html>
在CSS中使用ID选择器需要通过"#"+"id名称".类选择器(有的也称为class选择器)主要指的是通过DOM(Document Object Model)节点的类名(class)选取节点,例如代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器</title> 6 <style type="text/css"> 7 .box{ 8 background-color: #0000FF; 9 } 10 </style> 11 </head> 12 <body> 13 <div class="box"></div> 14 </body> 15 </html>
在CSS中使用类选择器需要通过"."+"类名".
二.ID选择器和类选择器的异同
相同点
两者选择器均能够选取到DOM节点并给DOM节点添加样式.
不同点
- 每个DOM节点允许有多个class,但是一般只允许拥有一个ID.一个DOM节点拥有多个class自然会产生样式的叠加,那么如果一个DOM节点拥有多个ID会出现什么情况?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器</title> 6 <style type="text/css"> 7 #bgbox{ 8 background-color: #0000FF; 9 } 10 #widthbox{11 width: 100px; 12 height: 100px; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="bgbox widthbox"></div> 18 </body> 19 </html>
根据测试,发现浏览器(测试时使用的Chrome)窗口预览的时候发现div的样式既没有颜色也没有宽度高度,这就说明一个DOM节点是不允许拥有多个ID
- ID选择器对DOM节点的样式控制的优先级高于类选择器。
- 在符合W3C标准的页面中,ID选择器选取DOM节点的数量≤1,类选择器的选取DOM节点的数量可能为0,也可能为N(N≥1)。
三.ID选择器和类选择器的合理使用
- ID唯一性,不能给多个DOM设置同一个ID.即不能通过ID选择器去控制多个DOM节点.虽然在测试代码
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>ID选择器</title> 7 <style type="text/css"> 8 #bgbox{ 9 background-color: #0000FF; 10 } 11 </style> 12 </head> 13 14 <body> 15 <div id="bgbox" style="width: 100px;height: 100px;"></div> 16 <div id="bgbox" style="width: 200px;height: 100px;"></div> 17 </body> 18 19 </html>
发现两个div都被设置上了颜色,但是这是不符合规范的。ID必须能够唯一的确定DOM节点!!
- 在编写样式时尽量使用类选择器,即使该DOM节点可能只出现一次。因为ID选择器的优先级比类选择器高,在后期样式的控制中会越来越难控制。也许有人会问:我可不可以全篇都使用ID选择器,那么就不存在和类选择器比较优先级了。理论上这是可以的,但是请注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器,那么即使两个DOM节点样式完全相同,那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护!!!极大的增加了维护的成本。
- 既然有了类选择器为什么还要规定一个ID选择器?在一个完整的HTML+CSS+JavaScript的页面体系中,对一个DOM节点的ID使用最多的其实是JavaScript(因为通过ID能唯一的确定DOM节点,方便控制),CSS中的使用的ID选择器一般情况下只会添加少量样式,更多对DOM节点的样式控制都是使用类选择器,既能够产生样式叠加,又方便后期的维护。请尽量避免在CSS中使用大量的ID选择器
- 常规情况下,CSS中会出现大量的ID选择器的情况——JavaScript插件配套的样式表中。
转载于:https://www.cnblogs.com/joeychou/p/5244478.html
ID选择器和类选择器的合理使用相关推荐
- css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...
- id选择器、标签选择器、类选择器、交集选择器、并集选择器
通过id选择器获取元素点击按钮显示效果 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- CSS - id选择器 和 类选择器
文章目录 类选择器 一 .类选择器 1. 语法 二 .类选择器 - 多类名 1. 多类名使用方式 三.案例 ID选择器 一.id选择器的使用 1. 语法 2. 注意 二.id选择器和类选择器的区别 类 ...
- CSS选择器(id选择器,包含选择器,标签名选择器,类选择器,属性选择器,通配符选择器,伪类选择器,相邻选择器,选择器的优先级,子选择器)
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
- CSS中id选择器和类选择器的区别
id选择器和类选择器的区别 (1)类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用. (2)id选择器好比人的身份证号码,全中国是唯一的,不得重复. (3)id ...
- 6—CSS基础选择器(标签选择器、类选择器、id选择器)
css简介 css是层叠样式表的简称,css主要用于设置html的文本内容.图像的外形以及版式的布局和外观显示样式.css让我们的网页更加丰富多彩,布局更加灵活自如. css语法规范 css规则由两个 ...
- CSS - 选择器(标签选择器、类选择器、ID选择器)
CSS - 选择器(标签选择器.类选择器.ID选择器) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu ...
- html类选择器和id选择器,HTML+CSS:css选择器介绍之标签选择器、类选择器以及ID选择器...
原标题:HTML+CSS:css选择器介绍之标签选择器.类选择器以及ID选择器 上篇文章给大家说了css的三种不同的引入方式,今天给大家说一下css的三种选择器:标签选择器.类选择器和ID选择器. 那 ...
- CSS基础选择器(标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器)
CSS基础选择器 选择器种类 标识 优缺点 标签(元素) div 快速为某一类标签统一样式,但不能设计差异化样式 类 .one-letter 为元素对象定义单独或者相同的样式 ID #app 同一个页 ...
最新文章
- 【转载】linux环境变量PS1的简介
- SQL CASE WHEN用法
- navigationbar
- [2019.1.14]BZOJ2005 [Noi2010]能量采集
- 专栏-美国人口和都市区
- 一些比较少用但比较有用的linux命令备忘
- PHP开发常见功能实现流程
- CF1413C Perform Easily(two pointers)
- VS生成Cordova for Android应用之Gradle
- Java反射设置list的属性值_利用java反射比较两个实体有哪些属性值不一样
- D3.js中国地图下钻
- C++ Hash表模板
- Ubuntu禁用网卡步骤(重启依然生效)
- 解决GLIDE4.0和圆角裁剪CENTERCROP冲突
- HTML+CSS网页设计期末课程大作业:【中国传统文化——古诗词】学生网页设计作品 dreamweaver作业静态HTML网页设计
- VScode输入感叹号时,没有出现模板
- Scala学习笔记2 (Lang上篇)
- tar,bz2,bzip等格式解压缩命令汇总
- python处理word替换_python替换word中的关键文字(使用通配符)
- 微信公众号微信小程序申请出现的问题