Question

假设我有这样的结构（可以＆＃39; 修改它）：

<ul>
    <li class="common">   <p>First A</p>   </li>
    <li class="common">   <p>Second A</p>   </li>
    <li class="common">   <p>Third A</p> </li>
    <li class="common">   <p><b>SELECT ME</b></p>   </li>
    <li>   <p>First B</p>   </li>
    <li>   <p>Second B</p>   </li>
    <li>   <p>...</p>   </li>
</ul>

有没有办法选择最后一个元素＆＃34;普通＆＃34;？（在这种情况下是第四个元素）

首先我尝试选择一个子集：

.common{
    background: red;
}

它运作正常。所以我尝试选择他们的最后一个孩子：

.common:last-child{
    background: green;
}

但不是运气。我也想避免为该元素添加一个类。

Jsfiddle

编辑：我简化了类和选择器以使其更清晰

Answer 1

有没有办法选择最后一个元素＆＃34;普通＆＃34;？

不，没有修改HTML的CSS选择器。

Answer 2

怎么样

＆＃13;

.common:last-of-type {
  background: green;
}

＆＃13;

Answer 3

您可以使用JavaScript或jQuery

$('custom').prev().css('color', 'red');

Answer 4

如果你不反对JS路线，你可以这样做

$('li.common.custom').first().prev('.common').css('background','yellow');

它找到第一个同时包含.common和.custom类的元素，然后转到上一个元素。所以它在技术上是最后一个只有.common

的元素

https://jsfiddle.net/89z20341/

结构是否与编码完全一致？例如，您要选择的元素上是否带有粗体标记？

如果是这样，你可以这样做

.common p b{
background: green;
display:block;

}

http://jsfiddle.net/seLm589s/4/

CSS选择器：子集选择中的last-child

4 个答案: