如何在Vue组件中使用CSS伪类目标？

Question

我正在做轮播，作为Vue组件。我正在使用CSS的伪类目标。实际上，在粗略的HTML / CSS中它可以工作，但在Vue上却不能。我认为问题出在Vue使用的哈希。

.item:not(:first-of-type) {
    opacity: 0;
    visibility: hidden;
  }

  .controlOperator:nth-of-type(2):target ~ .item:nth-of-type(2) {
    opacity: 1;
    visibility: visible;
  }

  .controlOperator:nth-of-type(2):target ~ .item:not(:nth-of-type(2)) {
    opacity: 0;
    visibility: hidden;
  }

<!-- crude HTML/CSS -->
<div id="item-1" class="controlOperator"></div>
<div id="item-2" class="controlOperator"></div>


<figure class="item">
  <h1>1</h1>
</figure>

<figure class="item">
  <h1>2</h1>
</figure>


<div class="controls">
  <a href="#item-1" class="controlButton">•</a>
  <tr></tr>
  <a href="#item-2" class="controlButton">•</a>
</div>