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