CSS中伪类
一、伪类
CSS伪类是用来添加一些选择器的特殊效果。
二、CSS中伪类的作用
CSS中伪类可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
三、CSS中的部分伪类
3.1、:hover伪类
选择鼠标悬停其上的链接。
例如:
font-size: 18px;
text-indent: 2em;
color: #0f7cbf;
font-family: 宋体;
}
#p1:hover{
text-decoration: underline;
}
span{
color: #666;
height: 20px;
text-indent: 1em;
margin-left: 10px;
font-size: 15px;
}
span:hover{
color: #F60;
text-decoration: underline;
}
<p style="font-size: 18px; text-indent: 1em; color: aliceblue; font-family: 宋体;"><b>家用电器</b></p>
</div>
<div id="div2">
<p id="p1"><b>大家电</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>平板电视</span>
<span>洗衣机</span>
<span>冰箱</span>
</li>
<li>
<span>空调</span>
<span>烟机/灶具</span>
<span>热水器</span>
</li>
<li>
<span>冷柜/酒柜</span>
<span>消毒柜</span>
<span>家庭影院</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 110px;">
<p id="p1"><b>生活家电</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>电风扇</span>
<span>净化器</span>
<span>吸尘器</span>
</li>
<li>
<span>净水设备</span>
<span>挂烫机</span>
<span>电话机</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 80px;">
<p id="p1"><b>厨房电器</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>榨汁机</span>
<span>电压力锅</span>
<span>电饭煲</span>
</li>
<li>
<span>豆浆机</span>
<span>微波炉</span>
<span>电磁炉</span>
</li>
</ul>
</div>
</div>
<div id="div2" style="margin-top: 80px;">
<p id="p1"><b>五金家装</b></p>
<div style="width: 230px; line-height: 30px; margin-top: -20px;">
<ul>
<li>
<span>淋浴/水槽</span>
<span>电动工具</span>
<span>手动工具</span>
</li>
<li>
<span>仪器仪表</span>
<span>浴霸/排气</span>
<span>灯具</span>
</li>
</ul>
</div>
</div>
预览效果图如下: