网站制作中经常使用的“ID”和“class”是如何区分 ?

原创 gentle123 随笔 前端文章 220阅读 2018-07-31 14:24:00 举报

四级标题一级标题网站制作中经常使用的“ID”和“class”是如何区分

童鞋们,我们在给某一个HTML代码(比如:div)起名字时,往往会使用到“ID”或者是“class”。这让很多小伙伴们感到疑惑的是我们在给div起名字时,使用到的ID和class有什么区别?什么时候使用id?什么时候使用class?

三级标题ID 和class的区别

在同一个页面中ID只能使用一次,而class能使用多次
在同一个页面内,不允许有相同名字的id 出现,但是允许相同名字的class。比如:我们给某个div起一个名字叫做dome,在同一个页面要多次用到,就用class定义。

如图:


那么,一个页面出现多个相同的ID,会有什么情况发生呢?

对,<div id="dome"></div> 中的dome报错,但是能正常显示出“宽度为300像素,高度为100像素,背景颜色为绿色”的长方形方块。(ps :这个根据你使用的软件而决定的。在dw软件中dome不会报错)

既然,在dw中软件中dome不会报错,也能在浏览器上正常显示出效果,那为什么还不用ID起名字呢?

什么时候使用id?什么时候使用class?
一般网站分为头部,主体部分,脚部。因为考虑到这些地方在同一个页面只会出现一次,所以用id 。当页面中用到js或者要动态调用对象的时候,要用到id。除了上述情况下,都是使用class来命名的。

如:

Js动态调用对象时,需要用到id

在同一个div中,同时出现ID和class时,浏览器会执行那一个?
小伙伴们,当你们看到别人写网站时,往往会看到这样的写法###如图:

请小伙伴们回答这样一个问题:我这样写代码对吗?如果书写正确的话,那么,这个div在浏览器在里显示背景颜色是黄色还是红色呢?没错。这段代码书写没有问题。这个div在浏览器里显示背景颜色是:红色。

如图:

那么,问题来了。为什么这个div在浏览器里显示背景颜色是红色而不是黄色的呢?这是因为:我们给红色背景div是用ID起名字;黄色背景的div是用class起名字。如果在同一个div中,同时出现ID和class。那么,ID的优先级要高于class。这就是上面这段代码在浏览器里显示背景颜色是红色而不是黄色的原因。

小伙伴们,怎么样呀,ID 和class的区别你们明白了吗?那就抓紧时间按照上面的代码试试吧!

更多干货可以关注我们的微信公众号:学大前端

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复