使用css选择最后一个可见的孩子[重复]

Question

如何使用 css 选择最后一个可见的孩子

<div>
   <span>1</span>
   <span>2</span>
   <span>3</span> <!— last visible child —>
   <span style=“display:none”>4</span>
   <span style=“display:none”>5</span> <!— last child —>
</div>

Answer 1

使用jquery 你可以为最后一个可见的孩子添加css

$('span:visible:last').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <!— last visible child —>
  <span style='display:none'>4</span>
  <span style='display:none'>5</span>
  <!— last child —>
</div>