設(shè)置背景色
第一個(gè)任務(wù)設(shè)置背景色中,如第一個(gè)背景色.slider li:nth-of-type(1) a,為什么是對(duì)a設(shè)置,而不是對(duì)li,這么寫.slider li:nth-of-type(1)的話發(fā)現(xiàn)背景色不能完整覆蓋那個(gè)方框,底下有部分沒(méi)有,為什么呢,a不是在li里面嗎,為什么a設(shè)置背景色能滿,li卻不能
第一個(gè)任務(wù)設(shè)置背景色中,如第一個(gè)背景色.slider li:nth-of-type(1) a,為什么是對(duì)a設(shè)置,而不是對(duì)li,這么寫.slider li:nth-of-type(1)的話發(fā)現(xiàn)背景色不能完整覆蓋那個(gè)方框,底下有部分沒(méi)有,為什么呢,a不是在li里面嗎,為什么a設(shè)置背景色能滿,li卻不能
2017-02-28
舉報(bào)
2017-03-01
第一個(gè)問(wèn)題說(shuō)明你還沒(méi)弄懂什么是CSS選擇器,.slider li:nth-of-type(1) a 這句話的意思是:先確定class名為slide的元素,然后確定這個(gè)元素內(nèi)的第一個(gè)標(biāo)簽為<li>的子元素,最后確定這個(gè)li里面的a元素,“所以這個(gè)CSS選擇器的最終目標(biāo)是a而不是li”。
第二個(gè)問(wèn)題,你可以回過(guò)頭去看看各個(gè)元素的css相關(guān)設(shè)置。你會(huì)發(fā)現(xiàn)li設(shè)置的高度只有130px,a沒(méi)有設(shè)置高度,而a的實(shí)際高度有154px(受瀏覽器影響或有差異,差異來(lái)自font-size)。那么問(wèn)題來(lái)了,a的高度是怎么來(lái)的呢?首先a里面有一行文本,第1.3.4.5個(gè)a標(biāo)簽內(nèi)顯示出來(lái)都是兩行,而2顯示出來(lái)是三行,我就拿兩行的來(lái)說(shuō)吧。字號(hào)font-size:22,22號(hào)字顯示出來(lái)實(shí)際高度為60px(360極速瀏覽器,其他瀏覽器可能并不是這個(gè)值,比如我用chrome看是52px),此外a還有padding-top:70px,padding-bottom:20px,此外加上border:2px,上下各2px,就是4px,那么a的實(shí)際高度為60+70+20+4=154px,所以你對(duì)li設(shè)置背景下面有空的地方,那實(shí)際上是a撐開(kāi)的高度,邊框很清楚的顯示了a的寬高范圍,li實(shí)際上已經(jīng)被填滿了。
2017-08-21
請(qǐng)問(wèn)為什么不能寫成.slider li>a:nth-of-type(2)呢? 為什么a要寫在后面呢 我看了?.slider li:nth-of-type(2)>a是可以的 >省略也可以 為什么a要寫在后面呢