HTML菜鸟入门3

群组选择符

---

对于每个块具有相同的样式

<style>
#box1,#box2,#box3{width:100px;height:100px;background:red;}
</style>
<div id="box1">块1</div>
<div id="box2">块2</div>
<div id="box3">块3</div>

效果展示：

---

class（类）选择符

---

class：可以重复使用的id，一个块可以属于多个class，定义多个class时需要用空格隔开

<style>
.box{width:100px;height:100px;background:blue;}
.box1{border:5px solid red;}
</style>
<div class="box">块1</div>
<div class="box box1">块2</div>
<div class="box">块3</div>

---

类型选择符

---

定义整个div、p等标签的样式

<style>
div{width:100px;height:100px;background:blue;}
p{width:50px;height:50px;background:red;}
</style>
<div>块1</div>
<div>块2</div>
<div>块3</div>

<p>段1</p>

<p>段2</p>
<p>段3</p>

效果如图：

---

包含选择符

div p:div中p的格式，注意中间包含空格

效果：


效果：

<style>
div p{width:100px;height:100px;background:red;}
</style>
<div>
<p>段1</p>
</div>
<p>段2</p>

</div>
<p>段1</p>
<p>段2</p>

---

更加详尽的html基础选择符点击click：
click