Question

我说过div：

<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>
<div>
    <div class="p1"></div>
    <div class="p2"></div>
    <div class="p1"></div>
    <div class="p2"></div>
</div>

我想在每个父div中设置最后一个p1 div的样式。我已经尝试了一些最后一个孩子的代码，但它不想采取。有什么想法吗？

Answer 1

使用纯css无法做到这一点。我使用jquery推荐这个：

$("div").find(".p1:last").css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>
<div>
  <div class="p1">not</div>
  <div class="p2">not</div>
  <div class="p1">this</div>
  <div class="p2">not</div>
</div>

Answer 2

您无法使用p1的类定位最后一个元素...但是，如果您的结构在p1 p2之后始终如此。然后你知道最后一个p1将是倒数第二个元素，你可以试试这个：

.p1:nth-last-child(2) {
    background:black;
    color:white;
}

这里有一些关于:nth-last-child的信息。

DemoFiddle

Answer 3

此函数查找具有给定类的某个元素的最后一个子元素：

function last_of_class(elt, cls) {
    var children = elt.getElementsByClassName(cls);
    return children[children.length-1];
}

现在，您可以使用它来应用类或某些样式：

var last_p1 = last_of_class(parent, 'p1');
last_p1.classList.add('last-p1');

.last-p1 { color: red; }

Answer 4

CSS支持:last-of-type选择器。但是，这将不选择 last 出现的类，但是TYPE的最后一次出现。

因此，作为 hack ，您可以定义自己的类型而不是类并使用该选择器：

HTML：

<div>
    <p1>1</p1>
    <p1>2</p1>
    <p2>3</p2>
</div>
<div>
    <p1>1</p1>
    <p1>2</p1>
    <p2>3</p2>
    <p1>4</p1>
</div>

CSS：

p1{
    display:block;
}
p2{
    display:block;
}

div p2:last-of-type{
    background-color:red;
}

http://jsfiddle.net/kwa8y85n/2/

对于较旧的浏览器，您需要使用一些javascript（如

）教他们有关元素的信息

<!--[if lt IE 9]> 
<script> document.createElement("p1"); document.createElement("p2"); </script>
<![endif]-->

但是你可以使用jquery方式......将这个答案视为“选项”： - ）

在父级中定位最后一个类实例

4 个答案: