在css中class选择器与id选择器区别

class选择器以点号开头,可多元素复用,权重为10;id选择器以井号开头,页面唯一,权重为100,优先级更高,常用于唯一结构与js快速获取。

在css中class选择器与id选择器区别

css中,class选择器id选择器都是用来选中html元素并为其应用样式的,但它们在使用方式和规则上有明显区别

1. 语法不同

class选择器使用点号(.)开头:

.my-class { color: blue; }

id选择器使用井号(#)开头:

#my-id { font-size: 16px; }

2. 使用范围不同

一个class可以在多个元素上重复使用,适合为一类元素设置相同样式:

立即学习前端免费学习笔记(深入)”;

  • 多个元素可以拥有相同的class名
  • 常用于组件、按钮、标题等通用样式

而一个id在一个页面中应唯一,只能用于一个元素:

在css中class选择器与id选择器区别

稿定AI社区

在线AI创意灵感社区

在css中class选择器与id选择器区别60

查看详情 在css中class选择器与id选择器区别

  • 每个id在整个页面中只能出现一次
  • 适合标识页面中唯一的结构,如导航栏、页脚

3. 权重不同

id选择器的优先级高于class选择器。当多个规则作用于同一个元素时,id样式会覆盖class样式:

  • id选择器权重为 100
  • class选择器权重为 10

这意味着即使class样式写在后面,id样式仍可能优先生效。

4. javaScript操作中的用途

javascript中,通过id获取元素更直接:

document.getElementById(‘my-id’)

而class通常用于批量操作:

document.getElementsByClassName(‘my-class’)

基本上就这些。简单说:class是“类别”,可复用;id是“身份证”,唯一且权重高。根据需要选择使用即可。

以上就是在

上一篇
下一篇
text=ZqhQzanResources