用CSS中的伪类:first-child装饰页面中的目录

本文链接：https://blog.csdn.net/MOONCOM/article/details/53037424

问题描述：今天翻看css的知识，看到css伪类中的:first-child，以前一直不知道怎么用，今天突发奇想，发现可以用在页面的目录制作中，于是就编写了下面的代码。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
$("a").css({"display":"block","background-color":"green","height":"30px","width":"70px","text-decoration":"none","text-align":"center","line-height":"30px","border-left":"2px solid red"});
});
</script>
<style type="text/css">
li{
float:left;
list-style:none;
}
li:first-child a{
border-left:none !important;
}
</style>


</head>
<body>
<div style="height:300px;width:500px;background-color:pink">
<ul>
<li><a href="">第一个</a></li>
<li><a href="">第二个</a></li>
<li><a href="">第三个</a></li>
<li><a href="">第四个</a></li>
</ul>
</div>
</body>
</html>

HTML页面如下图所示，没什么艺术细胞，所以做的很丑。