---
# System prepended metadata

title: class類型選擇器
tags: [Html 選擇器]

---

# class類型選擇器
###### tags: `Html 選擇器`

```htmlembedded=
<title>class类型选择器</title>
	<style type="text/css">
		.class01{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		.class02{
			color: gray;
			font-size: 26px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
<!--class 类型选择器的格式是：
		.class 属性值{
		属性：值;
		}
class 类型选择器，可以通过class 属性有效的选择性地去使用这个样式。-->

	<!-- 
		需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
		需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
	 -->

	<div class="class01">div标签class01</div>
	<div class="class02">div标签</div>
	<span class="class01">span标签class01</span>
	<span>span标签2</span>

</body>
```
![](https://i.imgur.com/7fgE7Br.png)
