选择器最后一个元素由父包装

Question

我正在尝试访问DOM中的最后一个.icon元素。我曾尝试过.icon：last-of-type或.icon：last-child，但它不起作用。不要使用.wrap：last-child，因为它有许多.wrap，它没有.icon。我想改变最后一个图标的颜色。例如：

<div class="wrap">
  <div class="item">
    <div class="icon">0000000</div>
  </div>
</div>
<div class="wrap">
  <div class="item">
    <div class="icon">0000000</div>
  </div>
</div>
<div class="wrap">
  <div class="item">
    <div class="icon">0000000</div>
  </div>
</div>
<div class="wrap">
  <div class="item">
    <div class="other-icon">0000000</div>
  </div>
</div>

Answer 1

我可以使用以下CSS更改“0000000”文本的颜色：

	div.wrap:last-child div.item div.icon {
		color: green;
	}

	<div class="wrap">
	  <div class="item">
		<div class="icon">0000000</div>
	  </div>
	</div>
	<div class="wrap">
	  <div class="item">
		<div class="icon">0000000</div>
	  </div>
	</div>
	<div class="wrap">
	  <div class="item">
		<div class="icon">0000022</div>
	  </div>
	</div>