如何选择“最后一个孩子的最后一个孩子”?

时间:2019-01-31 15:10:43

标签: html css css-selectors

我正在尝试使用CSS选择最后一个col-xs-12 div中包含的最后一个元素。问题是元素是动态的,因此可以是h2或h3等。

<div class="banner-text-img">
  <div class="row">
     <div class="col-xs-12">
     </div>
     <div class="col-xs-12">
     </div>
     <div class="col-xs-12">
       <p>...</p>
       <h1>...</h1>
     </div>
  </div>
</div>

我是通过逐个标签地选择来实现的,但这可能不是完美的选择。

.banner-text-img div[class^="col"]:last-child h1, .banner-text-img div[class^="col"]:last-child h2... etc.

2 个答案:

答案 0 :(得分:1)

您可以使用星号*选择任何元素,并使用:last-child定位最后一个元素。

.col-xs-12 > *:last-child

https://codepen.io/paulbremer/pen/JxEwbx

答案 1 :(得分:0)

您可以使用星号*

 .banner-text-img div[class^="col"]:last-child *:last-child