CSS id和class的区别

在本文中，我们将介绍CSS中id和class的区别，这是CSS中的两个常用选择器。了解它们的区别对于正确使用它们来选择和操作HTML元素至关重要。

阅读更多：CSS 教程

id选择器

id选择器是CSS代码中的一种唯一选择器。每个HTML元素都可以通过id属性来添加一个唯一的标识符。id选择器使用该唯一标识符作为选择器，通过选择器可以为该元素应用样式。

以下是使用id选择器的示例：

<!DOCTYPE html>
<html>
<head>
<style>
#myElement {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1 id="myElement">Hello World!</h1>

</body>
</html>

在上面的示例中，我们通过在h1元素中添加id属性，并在CSS代码中使用id选择器#myElement来选择该元素。选择器前面的#符号表示选择器要选择的是一个id。通过这种方式，我们可以为具有特定id的元素应用样式。

需要注意的是，HTML文档中每个id应该是唯一的。即使在CSS代码中，您使用相同的id在多个元素中应用相同的样式，只有第一个具有此id的元素会受到样式影响。

class选择器

class选择器是CSS代码中的一种通用选择器。每个HTML元素都可以通过class属性来添加一个或多个类名。class选择器使用类名作为选择器，通过选择器可以为具有相同类名的多个元素应用样式。

以下是使用class选择器的示例：

<!DOCTYPE html>
<html>
<head>
<style>
.myClass {
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<h1 class="myClass">Hello World!</h1>
<p class="myClass">This is a paragraph.</p>

</body>
</html>