CSS中子元素选择器比较有针对性,只能作为某元素子元素的元素。
语法:父元素 > 子元素 { 属性:属性值;}
需要注意的是,>的前后均有空格,且不能省略。
(类比京东页面的一部分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
background-color: rgba(111,111,111,1);
width: 230px;
height: 500px;
}
.nav > ul > li > a { /*针对于a*/
color: white;
font-size: 14px;
text-decoration: none; /*去掉链接下的下划线*/
}
.nav > ul > li > a:hover {
color: red;
font-size: 16px; /*经过的时候字体变大,觉得好玩添了一下,可以去掉*/
}
.nav > ul > li > a:active {
color: red;
}
.nav > ul > li { /*针对于li*/
color: white;
margin-top:8px; /*设置无序排列中的行间隔*/
margin-left:-10px; /* 值可以为负的*/
}
/*去掉无序排列前的圆点*/
.uo {
/*margin: 0; padding :0; 恢复圆点*/
list-style: none;
}
</style>
</head>
<body>
<div class="nav">
<ul class="uo">
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a> / <a href="#">运营商</a> / <a href="#">数码</a></li>
<li><a href="#">电脑</a> / <a href="#">办公</a></li>
<li><a href="#">家居</a> / <a href="#">家具</a> / <a href="#">家装</a> / <a href="#">厨具</a></li>
<li><a href="#">男装</a> / <a href="#">女装</a> / <a href="#">童装</a> / <a href="#">内衣</a></li>
<li><a href="#">美妆个护</a> / <a href="#">宠物</a></li>
<li><a href="#">女鞋</a> / <a href="#">箱包</a> / <a href="#">钟表</a> / <a href="#">珠宝</a></li>
<li><a href="#">男鞋</a> / <a href="#">运动</a> / <a href="#">户外</a></li>
<li><a href="#">汽车</a> / <a href="#">汽车用品</a></li>
<li><a href="#">母婴</a> / <a href="#">玩具乐器</a></li>
<li><a href="#">食品</a> / <a href="#">酒类</a> / <a href="#">生鲜</a> / <a href="#">特产</a></li>
<li><a href="#">礼品鲜花</a> / <a href="#">农资绿植</a></li>
<li><a href="#">医药保健</a> / <a href="#">计生情趣</a></li>
<li><a href="#">图书</a> / <a href="#">音像</a> / <a href="#">电子书</a></li>
<li><a href="#">机票</a> / <a href="#">酒店</a> / <a href="#">旅游</a> / <a href="#">生活</a></li>
<li><a href="#">理财</a> / <a href="#">众筹</a> / <a href="#">白条</a> / <a href="#">保险</a></li>
</ul>
</div>
</body>
</html>
结果如下: