css中id选择器和class选择器有何不同

1. 简介

在CSS中，选择器用来选择需要样式化的元素。其中，id选择器和class选择器是两种常见的选择器。

2. id选择器

2.1 概述

在CSS中，id选择器使用 # 符号来选取具有唯一标识的元素。每个id只能在文档中出现一次，用于标识文档中的某个特定元素。

#example-id {
  font-size: 16px;
  color: #ff0000;
}

在上面的代码中，id为“example-id”的元素将会被设置为字体大小为16像素和红色。

2.2 特点

id选择器的特点如下：

id选择器是唯一的，不能重复出现

id选择器可以为页面上的某个元素添加特定的样式

2.3 示例代码

#nav {
  background-color: #f2f2f2;
  height: 50px;
}
#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav li {
  float: left;
}
#nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}
#nav li a:hover {
  background-color: #333;
  color: #f2f2f2;
}

上面的代码实现了一个简单的导航栏，使用了id选择器对其进行样式化。

3. class选择器

3.1 概述

在CSS中，class选择器使用 . 符号来选取具有相同样式的元素。一个元素可以同时拥有多个class。

.blue {
  color: blue;
}
.bold {
  font-weight: bold;
}
.green {
  color: green;
}
.blue.bold {
  color: blue;
  font-weight: bold;
}
.highlight {
  background-color: yellow;
}

在上面的代码中，类为“blue”的元素将会被设置为蓝色，类为“bold”的元素将会加粗，类为“green”的元素将会被设置为绿色。类为“blue”和“bold”的元素将会被设置为蓝色和加粗。类为“highlight”的元素将会有黄色的背景色。

3.2 特点

class选择器的特点如下：

class选择器可以重复出现

多个元素可以使用同一个class

一个元素可以拥有多个class

3.3 示例代码

.warning {
  background-color: #ffffcc;
  border: 1px solid #ffcc00;
  color: #333;
  margin: 10px 0;
  padding: 10px;
}

上面的代码实现了一个警告框样式，可以在需要显示警告信息时使用class选择器进行样式化。

4. id选择器与class选择器的差异

id选择器和class选择器有以下几点不同：

id选择器是唯一的，而class选择器可以重复出现

id选择器可以为页面上的某个元素添加特定的样式，而class选择器可以为页面上的多个元素添加相同样式

id选择器的优先级高于class选择器

5. 总结

CSS中，选择器用来选择需要样式化的元素。id选择器和class选择器是两种常见的选择器，它们有不同的使用方法和特点。需要根据实际需求选择使用哪种选择器。