目標元素，如果它沒有任何後續的兄弟姐妹

我有以下的標記和樣式：目標元素，如果它沒有任何後續的兄弟姐妹

[class^="container"] .target:last-of-type { 
 
    color:red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="container-1"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="target">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
    <br> 
 
    <div class="container-2"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="target">5</div> 
 
    </div> 
 
</body> 
 
</html>

我要選擇.target元素，但只有當它是最後在其容器內。

:last-of-type類在這種情況下工作，我只是不明白爲什麼。難道它不應該突出顯示.target元素？它們是父容器中的最後一個（也是唯一）元素。或者我誤解了:last-of-type選擇器？

來源

2016-08-15 marchello

_「的：最後的型類在這種情況下工作的，我只是不明白，爲什麼」 _ - 因爲該元素是最後的類型（格）的父母，並且恰好也有「目標」類。 – CBroe

與[第一個元素類的CSS選擇器]（http://stackoverflow.com/q/2717480/1529630）相同的問題，但最後一個元素，而不是第一個元素。 – Oriol

:last-of-type不尋找類，而是如名稱所暗示的那樣，type與元素的tag相同。

這就是爲什麼它只突出顯示第二個容器div上的最後一個元素，它在.target也變爲:last-of-type時應用規則，即容器中的最後一個div。

我編輯了你的答案，檢查它在.item或div標籤本身之前的作用是否在last-of-type選擇器之前。

[class^="container"] .target:last-of-type { 
 
    color:blue; 
 
} 
 
[class^="container"] .item:last-of-type { 
 
    text-decoration: underline; 
 
} 
 

 
[class^="container"] div:last-of-type { 
 
    text-indent: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="container-1"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="target">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
    <br> 
 
    <div class="container-2"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="target">5</div> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-08-15 15:03:32

與大多數情況一樣，這很有意義，但如果你看錯了方向，很難看出來！ [xy問題，我猜。]（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem） – Randy

所以基本上它是選擇所有的兒童元素（基於標籤名稱，而不是類），然後將它們與一個類選擇器進行匹配。現在很清楚。謝謝！ – marchello

目標元素，如果它沒有任何後續的兄弟姐妹

回答

相關問題