Question

我如何使用css找到最后一个子元素，这是我的代码。

header nav div ul li ul:hover{
    transition: ease-in 3s ease;
}

我尝试了下面的方法，它不适合我。任何人都可以帮助我。我不想使用nth-child，因为有时候元素的数量会增加

<div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement"></div> <div class="rightelement"></div> <div class="leftelement"></div>  <div class="rightelement"></div>和.leftelement:last-of-type无效

Answer 1

您不想使用css选择器吗？你应该编辑你的标签。

您可以使用jQuery last()函数。

.last（）

描述：将匹配元素集减少到集合中的最后一个元素。

＆＃13;

$('.wow').last().css('color','blue');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wow">wow
</div>
<div class="lol">EOOOW
</div>
<div class="wow">HEYY
</div>
<div class="lol">LOL
</div>

＆＃13;

Answer 2

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

div:last-child {
  color: red
}

这是代码笔http://codepen.io/yeion7/pen/gPXvNN

Answer 3

您可以使用:nth-last-of-type(n)：

div:nth-last-of-type(2){
  color:red;
}

只要您要选择的元素是最后一个元素，增加元素数量就无关紧要了。

注意：如果您的元素始终为一个.leftelement和一个.rightelement，则此功能将有效。您不能仅使用CSS选择最后一个.leftelement。

更新：如果您的内容是动态的，有时候.leftelement作为最后一个元素，您仍然需要选择此元素，则可以执行以下操作：

div:nth-last-of-type(2):not(.rightelement),
div:nth-last-of-type(2):not(.leftelement)+.leftelement{
  color:red;
}

看看this pen。

Answer 4

我认为使用$scope.options = { height: 200, focus: true, toolbar: [ ['view', ['codeview']] ] };是不可能的，因为我们还没有db.collection("collectionName").find({'img.0': { $exists: true }}).sort({ updated_at : -1 })伪类，这是另一个受挫的用户blog。

事情是db.collection.aggregate([ { $match: {'img.0': { $exists: true }}}, {$sort: {"updated_at" : -1}} ])而CSS适用于last-of-class名称不在＆＃39;类＆＃39;上，但您可以编写css规则，如

last-of-type

如果last-child是最后一个孩子element，working fine here，它将完全正常。

如果您的div.parent div.lastElement:last-of-type{ color:blue; }是div.leftElement的最后一个孩子，但之后又有element of its kind，则会失败。 like this

如果你有＆＃39; .lastElement＆＃39;在各种.lastElement上，所有持续时间都将被设置为样式。 like this

Juice就是这样，我们需要类似classname的伪CSS类，但我们还没有。

Answer 5

你可以使用相邻的兄弟选择器来实现类似的东西，这可能有助于纯CSS

＆＃13;

div.rightelement + div:not(.rightelement){
color:green
}

＆＃13;

<div class="leftelement"></div>
<div class="rightelement"></div>
<div class="leftelement"></div>
<div class="rightelement"></div>
<div class="leftelement">tushar</div> <!-- this element -->
<div class="rightelement"></div>

＆＃13;

识别最后一个元素

5 个答案: