设置背景色

第一个任务设置背景色中,如第一个背景色.slider li:nth-of-type(1) a，为什么是对a设置，而不是对li，这么写.slider li:nth-of-type(1)的话发现背景色不能完整覆盖那个方框，底下有部分没有，为什么呢，a不是在li里面吗，为什么a设置背景色能满，li却不能

慕粉1235143442

2017-02-28

源自：十天精通CSS3 7-8

关注问题我要回答

706

操作

收起

2 回答

曦雨微尘回答被采纳 +3 积分
2017-03-01

第一个问题说明你还没弄懂什么是CSS选择器，.slider li:nth-of-type(1) a 这句话的意思是：先确定class名为slide的元素,然后确定这个元素内的第一个标签为<li>的子元素，最后确定这个li里面的a元素，“所以这个CSS选择器的最终目标是a而不是li”。
第二个问题，你可以回过头去看看各个元素的css相关设置。你会发现li设置的高度只有130px，a没有设置高度，而a的实际高度有154px（受浏览器影响或有差异，差异来自font-size）。那么问题来了，a的高度是怎么来的呢？首先a里面有一行文本，第1.3.4.5个a标签内显示出来都是两行，而2显示出来是三行，我就拿两行的来说吧。字号font-size:22，22号字显示出来实际高度为60px(360极速浏览器，其他浏览器可能并不是这个值，比如我用chrome看是52px)，此外a还有padding-top：70px，padding-bottom：20px，此外加上border：2px，上下各2px，就是4px，那么a的实际高度为60+70+20+4=154px，所以你对li设置背景下面有空的地方，那实际上是a撑开的高度，边框很清楚的显示了a的宽高范围，li实际上已经被填满了。