設(shè)置背景色

第一個任務(wù)設(shè)置背景色中,如第一個背景色.slider li:nth-of-type(1) a，為什么是對a設(shè)置，而不是對li，這么寫.slider li:nth-of-type(1)的話發(fā)現(xiàn)背景色不能完整覆蓋那個方框，底下有部分沒有，為什么呢，a不是在li里面嗎，為什么a設(shè)置背景色能滿，li卻不能

慕粉1235143442

2017-02-28

源自：十天精通CSS3 7-8

關(guān)注問題我要回答

853

操作

收起

2 回答

曦雨微塵回答被采納 +3 積分
2017-03-01

第一個問題說明你還沒弄懂什么是CSS選擇器，.slider li:nth-of-type(1) a 這句話的意思是：先確定class名為slide的元素,然后確定這個元素內(nèi)的第一個標(biāo)簽為<li>的子元素，最后確定這個li里面的a元素，“所以這個CSS選擇器的最終目標(biāo)是a而不是li”。
第二個問題，你可以回過頭去看看各個元素的css相關(guān)設(shè)置。你會發(fā)現(xiàn)li設(shè)置的高度只有130px，a沒有設(shè)置高度，而a的實際高度有154px（受瀏覽器影響或有差異，差異來自font-size）。那么問題來了，a的高度是怎么來的呢？首先a里面有一行文本，第1.3.4.5個a標(biāo)簽內(nèi)顯示出來都是兩行，而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設(shè)置背景下面有空的地方，那實際上是a撐開的高度，邊框很清楚的顯示了a的寬高范圍，li實際上已經(jīng)被填滿了。