CSS类选择器应用技巧-优快云博客

本文介绍了如何利用CSS中的类选择器对特定元素进行样式设置，重点讲解了类选择器相较于ID选择器的优势，包括提高代码复用性和简化样式管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题引入：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>类名选择器</title>
	<style type="text/css">
		p{
			color:red; 
		}
	</style>
</head>
<body>
    <p>这是段落1</p>
    <p>这是段落2</p>
    <p>这是段落3</p>
    <p>这是段落4</p>
</body>
</html>

浏览器打开的结果是：

css中的类的解析

如果我们需求是段落2以及段落4为绿色，其他段落为红色，这种需求

<style type="text/css">
		p{
			color:red; 
		}
	</style>

上面的代码实现不了。

有的人会说，我可以通过id选择器来实现，例如：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>类名选择器</title>
	<style type="text/css">
		p{
			color: red;
		}
		#p1{
			color: green;
		}
		#p2{
			color: green;
		}
	</style>
</head>
<body>
    <p>这是段落1</p>
    <p id="p1">这是段落2</p>
    <p>这是段落3</p>
    <p id="p2">这是段落4</p>
</body>
</html>

浏览器查看的结果是：

这样虽然能实现，但是每一处定义个Id效率不高，仔细分析段落2与段落4都是绿色，为啥不选择一个绿色的属性呢？

其实是可以实现的，这就需要类选择器。如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>类名选择器</title>
	<style type="text/css">
		p{
			color: red;
		}
		.green{
			color: green;
		}
	</style>
</head>
<body>
    <p>这是段落1</p>
    <p class="green">这是段落2</p>
    <p>这是段落3</p>
    <p class="green">这是段落4</p>
</body>
</html>

浏览器运行的结果：

所谓的类，就是class属性，class属性和Id非常相识，任何的标签都可以携带class属性

class属性可以重复，比如，页面上可能很多标签都有green这个类

注意：css里面用.表示类

.green{
			color: green;
		}

同一个标签，可能同时拥有多个类，用空格隔开

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>类名选择器</title>
	<style type="text/css">
		p{
			color: red;
		}
		.green{
			color: green;
		}
		.underLine{
			text-decoration: underline;
		}
	</style>
</head>
<body>
    <p>这是段落1</p>
    <p class="green">这是段落2</p>
    <p>这是段落3</p>
    <p class="green underLine">这是段落4</p>
</body>
</html>

浏览器打开的结果：