<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
ul.uls{
float:left;
}
ul.uls li{
display:inline;
}
ul.uls li a{
border-left:1px solid red;
padding:10px;
text-decoration:none;
}
</style>
</head>
<body>
<ul class="uls">
<li class="info"><a href="/">a</a></li>
<li><a href="/">b</a></li>
<li><a href="/">c</a></li>
<li><a href="/">d</a></li>
<li><a href="/">e</a></li>
</ul>
</body>
</html>
那代码运行效果为：
而此时想将第一个<a>标签的边框去掉，如果设置 .info a 选择器：
.info a{
border:none;
}
运行之后会发现未起作用，第一个<a>标签的边框依然还在。
可以尝试下面写法：
ul.uls li.info a{
border:none;
}
结果：
我只知其然，不知其所以然，具体原因有朋友知道可以分享一下。