Question

我试图在一个看起来像这样的代码中选择最后一个孩子的最后一个孩子（带有文字＆＃34;这一个＆＃34;）

<div class="block">
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div>this one</div>
  </div>
</div>

我试过了.block:last-child:last-child，但它没有用。 PS：我无法添加css类

Answer 1

要定位此目标，您可以使用以下内容：

.block > :last-child > :last-child {
  background-color: green; 
 }

这显然只是创建了一个绿色背景，将其更改为您想要的任何内容。

Answer 2

您可以使用.block div:last-child div:last-child

＆＃13;

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

＆＃13;

<div class="block">
  <div>not</div>
  <div>not</div>
  <div>not</div>
  <div>
    <div>not</div>
    <div>not</div>
    <div>this one</div>
  </div>
</div>

＆＃13;

Answer 3

我试过.block：last-child：last-child但它没有用。

您需要提供空间来获取子元素的last-child

".block div:last-child div:last-child"

＆＃13;

var element = document.querySelector( ".block div:last-child div:last-child" );
console.log( element.innerHTML );

＆＃13;

<div class="block">
  <div></div>
  <div></div>
  <div></div>
  <div>
    <div></div>
    <div></div>
    <div>this one</div>
  </div>
</div>

＆＃13;

Answer 4

您可以通过以下css选择器

进行选择

.block div:last-child div:last-child{
  color:#ff0000;
}

<div class="block">
  <div>Don't Select</div>
  <div>Don't Select</div>
  <div>Don't Select</div>
  <div>
    <div>Don't Selectt</div>
    <div>Don't Select</div>
    <div>This one</div>
  </div>
</div>

上面的选择器将如何选择所需的div

.block会选择应该有element

.block

然后第一个div:last-child选择器将选择具有div类

.block

然后上一个div:last-child选择器将选择上一个孩子div的最后一个孩子div

Answer 5

你也可以使用jquery

$(".block div:last").css({"color","red"});

选择最后一个孩子的最后一个孩子

5 个答案: