我想從 li.selected 中選擇最后一個，但是烏托邦選擇器.selected:last-of-type { background: hotpink;}根本不起作用。<ul> <li class="selected">un</li> <li class="selected">deux</li> <li class="selected"> ---- I want select that one ----- </li> <li class="foo">quatre</li> <li>cinq</li> <li class="tang">six</li></ul>我無法使用以下選擇器.selected:nth-child(3) { background: hotpink;}因為它是動態(tài)應(yīng)用程序，所以我怎樣才能只使用 css 選擇器？
4 回答
白豬掌柜的
TA貢獻(xiàn)1893條經(jīng)驗 獲得超10個贊
你可以這樣做：
$(document).ready(function(){
??$(".selected:last").css("background-color",?"yellow");
?});
或者
另一種使用方法：
$(document).ready(function(){??
??$(?".selected"?).last().css({?backgroundColor:?"yellow",?fontWeight:?
??"bolder"?});
});
更新1
這就是為什么utopian-selector在你的情況下不起作用的原因。
檢查這個例子：
.selected:last-of-type {
? background: hotpink;
}
<ul>
? <li class="selected">un</li>
? <li class="selected">deux</li>
? <li class="selected"> ---- I want select that one ----- </li>
</ul>
如果你觀察這個例子，如果你刪除剩余的list(li)帖子selected類，它會按你的方式工作。
為什么它不起作用
:last-of-type它針對與相似兄弟（而不是所有兄弟）相關(guān)的特定排列中的特定類型元素。
因此，由于除了您的列表之外還有其他selected兄弟姐妹，因此它無法選擇該顏色，因為它selected最后沒有找到類的元素，希望它現(xiàn)在有意義。
翻翻過去那場雪
TA貢獻(xiàn)2065條經(jīng)驗 獲得超14個贊
不太確定，但我認(rèn)為你正在嘗試做這樣的事情：
ul li:nth-last-of-type(1){background:red}
ul li:nth-last-of-type(3){background:blue}
<ul>
<li class="selected">un</li>
<li class="selected">deux</li>
<li class="selected"> ---- I want select that one ----- </li>
<li class="foo">quatre</li>
<li>cinq</li>
<li class="tang">six</li>
</ul>
注意：對于使用 nth-child 或 nth-last-of-type，您必須選擇元素，對于類來說它不起作用。
如果您嘗試命名該項目，然后從頂部或底部對其進行計數(shù)，那么現(xiàn)在這在 CSS 中不起作用。
您要么必須使用 jQuery 或某些 JavaScript 庫（用于動態(tài)計數(shù)），要么必須指出元素（以某種方式使用 CSS 選擇器），然后進行 CSS 更改。
注意：當(dāng)前CSS3規(guī)范不提供基于計數(shù)的選擇類。因此，如果您嘗試計算類并使用其中任何一個，nth-child, nth-last-child, nth-of-type, nth-last-of-type您將會非常失望，因為它們將基于元素進行計數(shù)，ul li但在計數(shù)時不會考慮類，例如ul li.selected:nth-child(3)。因此，這對于您的情況來說將毫無用處。
使用 jQuery：
你有 2 個選擇 - a) :lastb).last()
$(document).ready(function(){
$('.selected:last').css('background', 'red')
$( '.selected' ).last().css( "color", "blue" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul>
<li class="selected">un</li>
<li class="selected">deux</li>
<li class="selected"> ---- I want select that one ----- </li>
<li class="foo">quatre</li>
<li>cinq</li>
<li class="tang">six</li>
</ul>
烙印99
TA貢獻(xiàn)1829條經(jīng)驗 獲得超13個贊
你可以這樣做：
const selected = document.querySelectorAll('.selected');
const last = selected[selected.length-1];
last.classList.add('last');
然后更新你的CSS
.selected.last {
background: hotpink;
}
last-of-type選擇器不起作用的原因是它只適用于 html 元素，沒有類選擇器:(
我想您是在給定一些規(guī)則的情況下添加 .selected 類，因此當(dāng)您添加選定的類時，您還可以驗證它是否是最后一個元素并添加一個類似的類.last
也許，您最好的選擇是使用 javascript 或向該 .selected 元素添加第二個類。
哆啦的時光機
TA貢獻(xiàn)1779條經(jīng)驗 獲得超6個贊
您無法在類名上使用 nth：
在此代碼片段中，“.selected”是一個類名。您必須改為使用 DOM 元素。
ul .selected:nth-of-type(3) {
color: red;
}
你只能在 DOM 元素上使用它，所以你想使用：
ul li:nth-of-type(3) {
color: red;
}
我可以理解這是一個非常簡單的答案，如果您在實際將其寫入站點時需要進一步幫助創(chuàng)建選擇器，請告訴我。
- 4 回答
- 0 關(guān)注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消