class选择器语法：
class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。class选择器基本语法结构图如下所示：
![\"css](\"/images/css_id_selector_1071_1.png\")
class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。
class选择器实例
<!DOCTYPE html>
<html>
<head>
<style>
.intro{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class=\"intro\">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
<##ads_in_article_manong##>
“.intro{background-color:yellow;}”表示选中class为intro的所有元素，然后为这些元素设置CSS属性“background-color:yellow;”。
在看一个复杂一点的实例
<!DOCTYPE html>
<html>
<head>
<style>
p.hometown{
background:yellow;
}
</style>
</head>
<body>
<p>My name is Donald.</p>
<p class=\"hometown\">I live in Ducksburg.</p>
<p>My name is Dolly.</p>
<p class=\"hometown\">I also live in Ducksburg.</p>
</body>
</html>
首先我们来看一下“p.hometown”表示什么意思，“p.hometown”表示选中class="hometown"的p元素，本示例中有4个P元素，但是只有两个p标签的class为hometown，即第二个和第四个，“p.hometown”表示选中第二个和第四个p元素，然后对这两个p元素设置CSS属性“background:yellow;”。第一个和第三个P元素的背景颜色不会改变。
继续阅读与本文标签相同的文章
-
微软建议企业客户卸载KB4520062累积更新
2026-05-14栏目： 教程
-
他让我国芯片研究停滞13年，还骗走11亿研发资金，现状如何？
2026-05-14栏目： 教程
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目： 教程
-
5G套餐曝光遭“吐槽”，iphone11受追捧，导致苹果11销量比较高
2026-05-14栏目： 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾？
2026-05-14栏目： 教程