如何使用特定的 css 类突出显示最后一个 html 元素 [关闭]答案

【问题标题】：How to highlight last html-element with specific css class [closed]如何使用特定的 css 类突出显示最后一个 html 元素 [关闭]
【发布时间】：2014-01-03 19:39:23
【问题描述】：

如果div 和class="block" 的数量未知，如何在以下html 结构中用class="block" 突出显示最后一个div？（借助 css 选择器）

http://codepen.io/Feel_codepen/pen/Ifjzd

例如，我可以突出显示第三个 div。

【问题讨论】：

请在您的问题中添加相关代码和标记，不要让我们点击链接...
下面的html结构怎么做？ codepen.io/Feel_codepen/pen/Ifjzd
您刚刚更新了您的问题吗？为什么？你为什么不听从我的建议？
这是我的第一个问题，我在附加到问题的 html 结构中犯了错误。因此我更新了我的问题。
最好不要让这个问题中的 html 出现在外部站点中。见this answer on meta

标签： html css css-selectors

【解决方案1】：

还有魔法！

.main>div[class=block]:last-child{
  background-color:blue;
}

应该这样做：P 我希望

【讨论】：

【解决方案2】：

尝试使用

$("div:last-child").addClass("last-child");

通过这个你可以给某个 div 或元素的最后一个子元素添加一个 css 类

【讨论】：

【解决方案3】：

您可以使用:last-child 选择器。

.main .block:last-child {
  background-color: yellow;
}

http://codepen.io/anon/pen/vpqad

【讨论】：

【解决方案4】：

试试这个

.block:last-child
{
background-color:blue;
}

DEMO

【讨论】：

【解决方案5】：

你可以用:last-of-type试试这个

div.block:last-of-type{
 color:yellow;
}

CodepenDemo

【讨论】：

【解决方案6】：

通过使用 last-child 伪类

.block:last-child{
   background-color: yellow; /* or some other color */
}

http://www.w3schools.com/cssref/sel_last-child.asp

【讨论】：

【解决方案7】：

使用last-child:

.main .block:last-child{
    background-color:#FCC;
    /* Your styles*/
}

CodePen

【讨论】：