css定义为啥不全用CLASS而要用ID

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css定义为啥不全用CLASS而要用ID相关的知识,希望对你有一定的参考价值。

在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别

    引用的形式上,类选择器提供了对类名相同的标签同时样式控制的便利,课单独操作一个标签时继续引入一个Class有些大材小用,尤其是维护一个样式复杂的页面,用class去操作单一的标签容易搞混淆

    优先级上,ID选择器可以保证更高的优先级,达到更精细的样式控制

    ID可以保证唯一性,与类不同,在一个 html 文档中,ID 选择器会使用一次,而且仅一次

    ID 丰富了样式的描述,同时提供更精细的动作选择支持,比如配合Jscript的使用,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。有利于配合JS等的操作

参考技术A 这是因为,ID的优先级非常高,用id 可以绝对提高优先级!
--------------
我简单给你讲解,用class 的好处:
css 可以用 class ,也可以用 id 。他们区别在于:

一个页面只有一个id (这是标准,规定的),但是可以有无限个 class。
所以,css 如果用 id ,那不利于多出引用。
---------------------
但是,css定义为什么不全用CLASS而要用ID

有问题追问,我是前端攻城师!追问

但是,css定义为什么不全用CLASS而要用ID? 继续回答吧

追答

因为 id 优先级高。

css 写样式的时候,为了高度分离,写很多小的模块。

但是有时候冲突,要提高优先级,就用ID。

别的没什么。

当然,写得好的 css ,几乎很少甚至不用 id!!

因为 id 会占用额外的内存。

本回答被提问者采纳
参考技术B ID是用于标记 页面中只出现一次的对象,如页脚,如果用ID标识它 别人就不会轻易修改你的ID标识过的页脚CSS样式。 如果你用class去同时标识页脚和一个段落,别人只是为了更改段落样式往里面加了新属性,导致页脚格式变了,导致引用此class所有页面的页脚格式变了。显然不应该用class同时标识页脚和段落,页脚应该单独用ID标识来告诉这是一个标准格式,其他人不能随意往里面做修改。标识为ID的另一个优点是指定了一个标准,因为页脚只会用id去标识页脚的样式,别人只会第一时间去找ID修改,而不是去找Class。加快了搜索修改的速度。 参考技术C 理论上说,你可以不使用 id。但你要给每一个需要样式的元素加上 class。

一般一个页面的排版中只有一个主要的导航栏 (id="nav"),一个主要的内容栏(id="content"),一个主要的边栏(id="sidebar")。。。这些元素在页面中都是【唯一】的,所以使用ID来区分。

但有些元素的样式是一样的,比如两个相同的div小版块,这时就需要用 class。

class 和 id 的主要区别在于:class 可以在一个页面多次使用在不同元素,但一个 id 在一个页面只允许出现一次。

除此之外,id 还可以通过地址栏定位元素。我们经常看到地址栏中有 # 符号,例如 index.html#comments,当页面加载后,浏览器会自动在页面中寻找 id 为 comments 的元素,并自动卷动页面至此元素。

id 除了在 css 中,最大的用途应该是给 javascript 提供了直接帮助。document.getElementById('element_id'),通过 id 来获取元素。
参考技术D 在符合W3C的页面里,id是唯一的,class可以有多个。虽然都可以定义样式,但是还是有差别的。往往一个HTML页面是要配合CSS和JAVASCRIPT一起用。id在这个时候就有用处了。javascript里,可以用document.getElementById(id名称)来取得这个标签的object,然后操作。

为啥有些css的class标签里面有两个相同的标签,定义却截然相反呢?如下

.highlight_tip padding:7px 0 0; z-index:10; position:relative; position:absolute; left:0; bottom:0; width:733px; height:57px;
这里有两个position

那是写错了或者写多了。这种情况是以后面那个为准的。 参考技术A 相同的标签如果没有使用HACK标示,取最后一个生效。没见过这种写法,是不是测试的时候忘记删除了

以上是关于css定义为啥不全用CLASS而要用ID的主要内容,如果未能解决你的问题,请参考以下文章

为啥要用div+css来进行网页布局?

一个网站 css没有用id都是class这样有啥不好吗 正确的规则是啥样的呢

为啥html,xml的特殊符号转义不用斜杠,而要用& quot ;这样的奇怪形式?

WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip

为啥有些css的class标签里面有两个相同的标签,定义却截然相反呢?如下

css如何选择没有定义class或者id的元素