css id与class的区别是什么-猿码集

1. CSS id与class的定义

CSS（Cascading Style Sheets）是一种样式表语言，用来为HTML文档添加样式。在CSS中，id和class分别是两种用来标识和分类HTML元素的方法。

id：给具有唯一标识符的HTML元素进行标识。可以通过document.getElementById()在JavaScript中访问该元素，且每个id在文档中只能出现一次。id使用#表示，命名方式为一个字符串（字母、数字或下划线），不可以使用空格。

class：可以给多个HTML元素设置相同的class，使得它们共享相同的样式。class可以命名组合，即可以由多个字符串构成，字符串之间用空格隔开。

在常规网页开发中，我们通常会使用id对某些元素进行唯一标识，给它们添加样式或者进行JavaScript操作。

例如，我们可以利用id给导航栏上的某个标签添加具体的样式：

#nav-item {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
}

在JavaScript中，通过id也可以对一个元素进行操作，如改变其内容、样式、绑定事件等。这里以给按钮绑定一个点击事件为例：

var btn = document.getElementById('my-button');
btn.onclick = function() {
  console.log('clicked!');
}

在网页布局中，经常会有多个元素需要设置相同的样式，这时就可以使用class来实现。

例如，我们使用class来设置图片的圆角：

.rounded-img {
  border-radius: 50%;
}

这样，所有应用了class为.rounded-img的图片都会变成圆形。

class还可以命名组合，用于区分不同的样式组合。例如，.btn和.btn-primary确定了按钮的基本样式，而.btn-lg（大号）和.btn-sm（小号）则可以组合使用。这个组合特性可以使得样式的重用更加方便。

CSS id与class有以下几个区别：

一个id只能在文档中出现一次，而class可以在多个元素中重复使用。

CSS的样式选择器规定了一套优先级计算规则，用于解决同一个元素上多个选择器产生的冲突。这套规则中，id选择器的优先级是最高的，class选择器的优先级仅次于id选择器。

例如：

#my-div {
  color: red;
}
.my-div {
  color: blue;
}

如果一个元素同时拥有以上两个选择器的样式规则，由于id选择器优先级更高，所以它的字体颜色会是红色。

class主要用于一组元素的标识，而id用于标识具体的某个元素，并且应该唯一。因此，使用class会更多地体现HTML文档语义化的思想。

例如：

<div class="header">
  <h1>这是一个标题</h1>
  <p>这是一段内容</p>
</div>
<div id="main">
  <p>另一个主要区域的内容</p>
</div>

这里，class="header"表示这个div是页面的头部，id="main"则表示这个div是页面的主要内容。

CSS id与class都是用来标识HTML元素并设置样式的方法。通过id可以唯一标识某个元素并进行JavaScript操作，class则用来方便地为一组元素设置相同的样式。它们的主要区别是唯一性、优先级和HTML语义化。

在使用时，可以根据需要灵活运用这两种选择器，使得HTML文档和CSS样式表更符合语义化和重用性的思想。