為什么選擇器:last-child有時沒有起作用?


想要有.list樣式的最后一個不要下划線。
為什么:last-child沒有起作用?

clipboard.png

el:last-child 的匹配規則是:第一步,查找 el 選擇器匹配元素的所有同級元素(siblings);第二步,在同級元素中查找最后一個元素;第三步,檢驗最后一個元素是否與選擇器 el 匹配。

.list:last-child 匹配到了 footer,但 footer 不匹配 .list,故選擇器不生效。

 

1.可改成.list:nth-last-child(2)

2. 把所有.list標簽用div包起來,保證最后一個子元素為.list

3.div .list:first-of-type{font-weight:blod}

這時候調試下就沒問題了。
這里我們要理解下:first-child和:first-of-type 區別:
:first-child  指的是父元素的第一個子元素,例如我們本例子中要使用first-child實現的話,必須把h1標簽去掉保證沒有兄弟元素,或者單獨把P標簽包圍起來;

:first-of-type 指的是父元素下相同類型子元素中的第一個,比如我們例子中的第一個p標簽。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM