(CSS):last-child不起作用的原因
阿新 • • 發佈：2018-05-06
utf col htm 子元素 red 選擇器 結果 原本 pan
今天寫了個CSS的測試樣例，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>偽類選擇器</title> <style type="text/css"> .div-01:last-child{ color: red; } </style> </head> <body> <div class="div-01"> <p class="p-01"> 同 </p> </div> <div class="div-01"> <p class="p-01"> 誌 </p> </div> <div class="div-01"> <p class="p-01"> 們 </p> </div> <p> 辛 </p> <p> 苦 </p> </body> </html>
原本覺著，選擇器會選中
<div class="div-01">
<p class="p-01">
們
</p>
</div>
可結果出乎我的意料，我們重新理解一下last-child選擇器，在CSS標準中的含義
:last-child p:last-child 選擇屬於其父元素最後一個子元素每個 <p> 元素。
選擇其父元素最後一個子元素，每個<p>元素，根據這段話我們能否發現：div-01對應父元素是body，而body最後一個子元素是
<p>
苦
</p>
而我的選擇器是：
.div-01:last-child
p對應的類與選擇器不匹配，自然就選擇不上了。
(CSS):last-child不起作用的原因