多个css类选择器使用规则

最新推荐文章于 2025-07-01 09:31:29 发布

原创最新推荐文章于 2025-07-01 09:31:29 发布 · 1.7w 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#html #class

html 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中类选择器的使用方法，包括一个元素如何应用多个类选择器及不同类选择器之间的组合方式。通过实例展示了类选择器在实际布局中的作用，以及与ID选择器的区别。

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

类选择器在style中的写法： .类选择器名字注意前面有个点

在body中的写法： class="类选择器名字"

通常为了减少代码量，使代码更简洁，机智的程序员们会选择调用已有的符合条件的样式，而若一个标签需要多个样式，或存在包含关系，则要考虑用多个类选择器。请看下面的几种情况：

一、一个标签使用多个类选择器

<div class='a b'>这是类选择器同时采用a和b的div标签</div>

</body>

运行结果如下图所示：

class为a的标签，颜色为粉色，字体大小20px。

class为b的标签，颜色为绿色，字体大小为默认值。(不是20px)

class为同时采用a和b的标签，颜色为后面的颜色绿色，如果两个选择器有相同的属性值，则以最后一个属性值为准。字体大小为a中设定的值。

然而ID选择器则不能像类选择器一样一起使用，把class改为id，代码如下：

<head>
<style type="text/css">
#a{
background:pink;
font-size:20px;
}
#b{
background:green;
}
</style>
</head>
<body>
<div id='a'>这是id选择器为a的div标签</div>
<div id='b'>这是id选择器为b的div标签</div>
<div id='a b'>这是id选择器同时采用a和b的div标签</div>

</body>

运行结果如下图：

同时采用a和b标签，则没有效果，说明在id选择器中，不能像类选择器一样同时使用

二、两类选择器之间有无空格

<head>
<style type="text/css">

.a.b{
font-size: 20px;
}
.a .b{
background:pink;
}
</style>
</head>
<body>
<div class='a b'>这是类选择器同时采用a和b的div标签</div>
<div class='a'>这是类选择器为a的div标签
<div class='b'>这是类选择器为a下类为b的div标签</div>
</div>
</body>