mdn - css selector+sign



如何在CSS中選擇具有特定類名的“最後一個孩子”? (6)

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

如何選擇班級名稱列表中的“最後一個孩子”?

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的例子不起作用,但是有沒有類似這樣的工作?

重要:

a)我不能使用ul li:nth-child(3) ,因為它可能發生在第四或第五位。

b)沒有JavaScript。

任何幫助將不勝感激,謝謝!

https://src-bin.com


Answer #1

有一個解決方法(在特定情況下)解決此問題:

雖然這並不直接回答這個問題,但這種思維方式實現相同目標的可能性很高:

比方說,我們去隱藏列表中低於索引3所有元素

<ul>
    <li>test1</li>
    <li>test2</li>
    <li class="hide">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

CSS

li{ display:none; }
li.hide ~ li{ display:block; }

現場演示

這將擺脫需要為需要hide所有元素添加hide類,所以我們只剩下一個類, hide ,它們統治所有元素。 現在,您不需要使用無法與類名稱一起工作的last-of-type 。 你必須重新考慮你對事物進行分類的方法


Answer #2

你不能在沒有JS的列表中定位類名的最後一個實例。

但是,根據你想要達到的目標,你可能不是完全不在乎css運氣。 例如,通過使用下一個兄弟選擇器,我在這裡最後一個.list元素之後添加了一個可視分隔符: http://jsbin.com/vejixisudo/edit?html,css,output : .list


Answer #3

使用這個選擇器: ul > li:last-of-type 。 這將選擇無序列表( <ul> )中的每個最後列表項( <li> <ul> )。

答案的分解:我從父元素( <ul> )中僅選擇了作為其類型( <li> )的最後一個子元素的無序列表( <ul> )的子元素( <ul> )。

您可以使用Id或類將選擇器限制為某些無序列表。 例如: ul.my-class > li:last-of-type將只從該類的無序列表中選擇最後一個<li>


Answer #4

我建議你利用這樣一個事實,即可以將多個類分配給一個元素,如下所示:

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

最後一個元素具有像它的兄弟姐妹一樣的list類,但也有last類,您可以使用它來設置任何CSS屬性,如下所示:

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}

Answer #5

這可以使用屬性選擇器來完成。

[class~='list']:last-of-type  {
    background: #000;
}

class~選擇一個特定的整個單詞。 這可以讓你的列表項目有多個類,如果需要的話,以不同的順序。 它仍然會找到確切的類“列表”並將樣式應用到最後一個。

在這裡看到一個工作示例: http://codepen.io/chasebank/pen/ZYyeab : http://codepen.io/chasebank/pen/ZYyeab

閱讀關於屬性選擇器的更多信息:

http://css-tricks.com/attribute-selectors/ http://www.w3schools.com/css/css_attribute_selectors.asp


Answer #6

這是一個厚顏無恥的答案,但是如果您僅限於CSS並且能夠在DOM中反轉您的項目,那麼可能值得考慮。 它依賴於這樣一個事實,即對於特定類的最後一個元素沒有選擇器,實際上可以對第一個元素進行設計。 訣竅就是使用flexbox以相反的順序顯示元素。

ul {
  display: flex;
  flex-direction: column-reverse;
}
ul > li.list {
  background-color: #888;
}
ul > li.list ~ li.list {
  background-color: inherit;
}
<ul>
  <li class="list">0</li>
  <li>1</li>
  <li class="list">2</li>
</ul>
<ul>
  <li>0</li>
  <li class="list">1</li>
  <li class="list">2</li>
  <li>3</li>
</ul>





css-selectors