問題出在此CSS和HTML之內。這是帶有示例代碼的jsFiddle的鏈接。的HTML<ul> <li class"complete">1</li> <li class"complete">2</li> <li>3</li> <li>4</li></ul>的CSSli.complete:last-child { background-color:yellow;}li.complete:last-of-type { background-color:yellow;}這兩行CSS都不應該針對帶有“ complete”類的最后一個li元素嗎？jQuery中的此查詢也不針對它：$("li.complete:last-child");但這確實做到了：$("li.complete").last();li { background-color: green;}li.complete:first-child { background-color: white;}li.complete:first-of-type { background-color: red;}li.complete:last-of-type { background-color: blue;}li.complete:last-child { background-color: yellow;}<ul> <li class="complete">1</li> <li class="complete">2</li> <li>3</li> <li>4</li></ul>
3 回答
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
如果該元素不是VERY LAST元素，則：last-child將不起作用
除了哈利的答案，我認為添加/強調：如果元素不是容器中的VERY LAST元素，則：last-child將不起作用也至關重要。不管出于什么原因，我花了數小時才意識到這一點，即使Harry的回答很徹底，我也無法從“最后一個孩子選擇器用于選擇父母的最后一個孩子元素”中提取信息。
假設這是我的選擇器： a:last-child {}
這有效：
<div>
<a></a>
<a>This will be selected</a>
</div>
這不是：
<div>
<a></a>
<a>This will no longer be selected</a>
<div>This is now the last child :'( </div>
</div>
這不是因為a元素不是其父元素內的最后一個元素。
可能很明顯，但這不適合我...
LEATH
TA貢獻1936條經驗 獲得超7個贊
我遇到類似的情況。我想讓最后一個背景.item變成黃色，看起來像...
<div class="container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
...
<div class="item">item x</div>
<div class="other">I'm here for some reasons</div>
</div>
我nth-last-child(2)用來實現它。
.item:nth-last-child(2) {
background-color: yellow;
}
我覺得很奇怪，因為第n個倒數第二個孩子應該是最后一個倒數第二個孩子，但是它可以工作，并且我得到了我期望的結果。我從CSS技巧中發現了這個有用的技巧
- 3 回答
- 0 關注
- 687 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消