类与ID的区别

2025年3月26日 | 阅读 3 分钟

CSS中的选择器是CSS规则集的一部分，用于选择我们要样式化的内容。ID和类都是CSS元素选择器，用于根据分配的名称来标识元素。CSS ID和类选择器是CSS中最常用的选择器。

在使用选择器时，有时会出现ID和类之间的混淆。两者都没有默认的样式信息；它们需要CSS来选择它们并应用样式。尽管两者都用于选择元素，但它们在许多方面彼此不同。

ID和类之间的区别如下表所示。

Class	ID
我们可以将一个类应用于多个元素，因此在一个页面上可以多次使用它。	ID在一个页面中是唯一的，我们只能将其应用于一个特定的元素。
类被分配给一个元素，其名称以"."开头，后跟类的名称。	ID的名称以"#"符号开头，后跟一个唯一的ID名称。
我们可以将多个类选择器附加到一个元素上。	我们只能将一个ID选择器附加到一个元素上。
语法 .class{ // CSS声明 }	语法 #id{ // CSS声明 }

让我们分别讨论ID和类。

ID选择器

ID选择器用于选择HTML元素的ID属性来选择特定的元素。ID在一个页面中始终是唯一的，因此选择它是为了选择单个、唯一的元素。

它以哈希字符（#）开头，后跟元素的ID。

ID选择器的示例如下。

示例

在此示例中，我们选择ID为“para”的元素。

<!DOCTYPE html>
<html>
<head>
<style>
#para {
text-align: center;
color: blue;
font-size: 25px;
background-color: pink;
}
</style>
</head>
<body>
<h1> Welcome to the Javatpoint.com </h1>
<p id = "para">This paragraph will be affected.</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

输出

类选择器

类选择器用于选择具有特定class属性的HTML元素。它以句点字符 . （实心圆点符号）开头，后跟类名。

注意：类名不应以数字开头。

类选择器的示例如下。

示例

在此示例中，我们选择类名为“example”的元素。

<!DOCTYPE html>
<html>
<head>
<style>
.example {
text-align: center;
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="example">This heading is blue and center-aligned.</h1>
<p class="example">This paragraph is blue and center-aligned.</p>
</body>
</html>

输出

特定元素的CSS类选择器

我们也可以使用类选择器来样式化特定元素，无论它是否应用于不同的元素。

如果我们只需要指定一个特定的HTML元素受到影响，我们必须在类选择器中使用元素名。

从下面的例子中会更清楚。

示例

<!DOCTYPE html>
<html>
<head>
<style>
p.example {
text-align: center;
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1 class="example">This heading is not effected.</h1>
<p class="example">This paragraph is blue and center-aligned.</p>
</body>
</html>

输出

这是另一个例子，我们在同一个元素上应用了多个类。让我们来看一个相同的说明。

示例

在此示例中，我们在段落元素上使用了两个类（example和para），并使用这两个类来样式化段落。

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.example {  
    text-align: center;  
    color: red;  
	font-size: 1cm;
}  
.para{
font-family: Lucida Calligraphy;
text-shadow: 5px 8px 9px yellow;
}
</style>  
</head>  
<body>  
<h1 class="example">This heading is red and center-aligned.</h1>  
<p class="example para">This paragraph is red and center-aligned with a font-family "Lucida Calligraphy" and text-shadow.</p>   
</body>  
</html> 

输出

下一个主题CSS滚动条

类与ID的区别

ID选择器

示例

类选择器

注意：类名不应以数字开头。

示例

特定元素的CSS类选择器

示例

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

类与ID的区别

ID选择器

示例

类选择器

注意：类名不应以数字开头。

示例

特定元素的CSS类选择器

示例

示例

相关帖子

Removing Underline from the Link in CSS

CSS 100 Height

CSS Half Circle

CSS Header

CSS 对网页设计有响应能力吗

CSS Width and Height

CSS Override

CSS Shapes

CSS Darken Image

CSS Styles for Dropdownlist

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器