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

Posted 2023-05-06

在某些方面，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标示，取最后一个生效。没见过这种写法，是不是测试的时候忘记删除了