Question

<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。

任何帮助将不胜感激，谢谢！

Answer 1

这可以使用属性选择器完成。

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

class~选择一个特定的整个单词。这允许您的列表项在需要时以各种顺序具有多个类。它仍然会找到确切的类“列表”并将样式应用到最后一个。

请参阅此处的工作示例：http://codepen.io/chasebank/pen/ZYyeab

阅读有关属性选择器的更多信息：

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

Answer 2

您可以使用相邻的兄弟选择器来实现类似的功能，这可能有所帮助。

.list-item.other-class + .list-item:not(.other-class)

将在具有类other-class的最后一个元素之后有效地定位紧随其后的元素。

在此处阅读更多内容：https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Answer 3

这是一个厚颜无耻的答案，但是如果你只受限于CSS而且能够在DOM中反转你的项目，那么可能值得考虑。它依赖于这样一个事实，即虽然没有特定类的 last 元素的选择器，但实际上可以设置第一个的样式。诀窍是然后使用flexbox以相反的顺序显示元素。

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, "unstyle" elements which are not the first. */
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>

Answer 4

我想最正确的答案是：使用:nth-child（或者，在此特定情况下，使用:nth-last-child）。大多数人只知道这个选择器的第一个参数是基于n的计算来获取一系列项目，但它也可以采用第二个参数＆＃34; [任何CSS选择器]＆＃34;。

您可以使用此选择器解决您的方案：li:nth-last-child(1 of .list)

但技术上正确并不意味着你可以使用它，因为这个选择器现在只在Safari中实现。

进一步阅读：

Answer 5

我建议你利用这样一个事实：你可以为一个元素分配多个类：

<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 6

如果没有JS，您无法在列表中定位类名的最后一个实例。

然而，根据你想要达到的目标，你可能不会完全失去运气。例如，通过使用下一个兄弟选择器，我在此处<!DOCTYPE html> <html lang="en"> <head> <title>Home - Bay FM - 99.9</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="bayfm.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font- awesome/4.5.0/css/font-awesome.min.css"> <meta name="viewport" content="initial-scale=1.0"/> <script src="/wimpy/wimpy.js"></script> </head> <body> <div id="container"> <header> <div id="logo"><a href="index.php"><img src="new-bayfm-logo400x120.png" alt="logo"></a></div>  <div id="wimpyplayer" style="width:100%;height:100%;" data-wimpyplayer data- skin="/Rad.tsv" data-coverArt="<?php date_default_timezone_set('Australia/Sydney'); $hour = date('G'); switch ($hour) { case ($hour >= 1 && $hour < 5); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/the-early- shift.jpg"; break; case ($hour >= 5 && $hour < 7); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/sunrise-show.jpg"; break; case ($hour >= 7 && $hour < 10); echo "http://www.zwebdesigns.info/wimpy/the-breakfast-show.jpg"; break; case ($hour >= 10 && $hour < 12); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/coffee- club.jpg"; break; case ($hour >= 12 && $hour < 15); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/midday-music.jpg"; break; case ($hour >= 15 && $hour < 18); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/drive-by-show.jpg"; break; case ($hour >= 18 && $hour < 19); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/news-hour.jpg"; break; case ($hour >= 19 && $hour < 20); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/sports-hour.jpg"; break; case ($hour >= 20 && $hour < 22); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/the-wind-down.jpg"; break; case ($hour >= 22 && $hour < 1); echo "http://www.zwebdesigns.info/wimpy/audio-player-files/night-sounds.jpg"; break; default: echo "No image to display"; } ?>" data-responsive=1 data-startUpText="Click play to listen live" data- loop=2 data-volume=0.5 data-linkEnable=1 data- disableControls="pause,coverPlayPause,rewind,playlist" data-media=' [{"title":"The Early Shift","file":"http://zwebdesigns.info/wimpy/audio- player-files/crack-rock.mp3","image":"/wimpy/audio-player-files/the-early- shift.jpg","artist":"Hosted By Frank Ocean"},{"title":"Sunrise Show","file":"http://zwebdesigns.info/wimpy/audio-player-files/lay-it-all-on- me.mp3","image":"/wimpy/audio-player-files/sunrise-show.jpg","artist":"Hosted By Sarah Williams"},{"title":"Breakfast Show","file":"http://zwebdesigns.info/wimpy/audio-player-files/make-me-feel- better.mp3","image":"/wimpy/audio-player-files/the-breakfast- show.jpg","artist":"Hosted By Alex Adair"},{"title":"Coffee Club","file":"http://zwebdesigns.info/wimpy/audio-player- files/sundream.mp3","image":"/wimpy/audio-player-files/coffee- club.jpg","artist":"Hosted By Rufus"},{"title":"Midday Music","file":"http://zwebdesigns.info/wimpy/audio-player-files/tongue- tied.mp3","image":"/wimpy/audio-player-files/midday-music.jpg","artist":"Hosted By Rubes"},{"title":"Drive By Show","file":"http://zwebdesigns.info/wimpy/audio- player-files/you-and-me.mp3","image":"/wimpy/audio-player-files/drive-by- show.jpg","artist":"Hosted By Mark Logan"},{"title":"News Hour","file":"http://zwebdesigns.info/wimpy/audio-player-files/is-this-how-you- feel.mp3","image":"/wimpy/audio-player-files/news-hour.jpg","artist":"Hosted By Paige Karatha"},{"title":"Sports Hour","file":"http://zwebdesigns.info/wimpy/audio-player-files/d'yer- mak'er.mp3","image":"/wimpy/audio-player-files/sports- hour.jpg","artist":"Hosted By Gary Somers"},{"title":"The Wind Down","file":"http://zwebdesigns.info/wimpy/audio-player-files/stay-with- me.mp3","image":"/wimpy/audio-player-files/the-wind-down.jpg","artist":"Hosted By Kat"},{"title":"Night Sounds","file":"http://zwebdesigns.info/wimpy/audio- player-files/give-up.mp3","image":"/wimpy/audio-player-files/night- sounds.jpg","artist":"Hosted By Arthur Beech"}]' > </div> </html>元素的最后一个元素之后添加了一个可视分隔符：http://jsbin.com/vejixisudo/edit?html,css,output

Answer 7

此问题有一种解决方法（在特定情况下）：

虽然这不能直接回答问题，但是有一个很高的问题这种思维方式实现同一目标的概率：

让我们说我们去隐藏列表中低于索引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; }

Live Demo

这将消除向所有需要隐藏的元素添加hide类的需要，因此我们只剩下一个类hide，它们统治它们。现在，您不需要使用无法使用类名的last-of-type。你必须重新思考你对事物进行分类的方法

Answer 8

使用此选择器：ul > li:last-of-type。这将选择无序列表（<li>）中的每个最后一个列表项（<ul>）。

答案的细分：我只选择无序列表（>）的子（<ul>），该列表是其类型（<li>）的最后一个子节点父元素（<ul>）。

您可以使用Id或类将选择器限制为某些无序列表。例如：ul.my-class > li:last-of-type将仅从该类的无序列表中选择最后一个<li>

Answer 9

$('.class')[$(this).length - 1]

或

$( "p" ).last().addClass( "selected" );

如何在CSS中选择具有特定类名的“最后一个孩子”？

9 个答案:

此问题有一种解决方法（在特定情况下）：

CSS

Live Demo