div逻辑区
-
在页面中使用<div>可以将页面分解为逻辑区，保证了结构清晰并便于指定样式。
div的使用代码示例如下：
<div id="fav"> //属性说明逻辑区
<div id="color"> //颜色逻辑区
<h3>my favorite color:</h3>
<ol>
<li>red</li>
<li>blue</li>
<li>orange</li>
</ol>
</div>
<div id="city"> //访问城市逻辑区
<h3>the cities i have visited:</h3>
<ul>
<li>tianjin</li>
<li>beijing</li>
<li>qingdao</li>
</ul>
</div>
</div>
-
子孙的选择
选择逻辑区的某些元素的子孙元素，使用示例如下：
#fav h3{
color:black;
}
说明：（该规则选择了id为fav的<div>所有子孙h3元素）
fav:父元素
h3:子孙元素
span逻辑分组
-
利用<span>可以创建内联字符和元素的逻辑分组
span使用代码示例如下：
<ul>
<li><span class="position">wudadao</span>,<span class="city">tianjin</span></li>
<li><span class="position">changcheng</span>,<span class="city">beijin</span></li>
<li><span class="position">badaguan</span>,<span class="city">qingdao</span></li>
</ul>
指定span样式：
.position{
font-style:italic;
}
-
span与em，strong的区别
em结构用来强调某些文字，strong结构用来强调一个重点。而span只是用来改变某些文字的样式
伪类
-
伪类的运用
例如对于a元素来说会有3个状态：未访问，已访问，悬停在链接上方。则可以对不同的状态设置不同的属性。示例代码如下：
a:link{ //未访问
color: green;
}
a:visited{ //已访问
color: red;
}
a:hover{ //悬停于链接上方
color:yellow;
}
