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

来源：互联网发布：3b线切割编程小狗图案编辑：程序博客网时间：2024/06/04 01:01

问题描述：今天翻看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页面如下图所示，没什么艺术细胞，所以做的很丑。

这里练习了css在元素中书写、在HTML头部中书写和用js书写css，所以看起来有点乱。

0 0