如何使用 css 定位跨度中的特定文本

Question

我有一个html：

<div class="test>

<span>Yellow</span>
<span>Blue</span>
<span>Purple</span>

</div>

我想要隐藏包含文本“黄色”和“紫色”的跨度。我可以用 CSS 做吗？也许属性？ Span 没有类，或者换句话说，它们没有类。

Answer 1

您可以将类添加到您的跨度中：

.test {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin: 0 auto;
}

.test span {
  height: 20px;
  flex: 1;
  margin: 0 1rem;
  color: white;
  text-align: center;
}

.test span.purple {
  background: purple;
}

.test span.red {
  background: red;
}

<div class="test">
<span class="purple">purple</span>
<span class="red">red</span>
<span class="purple">purple</span>
<span class="red">red</span>
</div>

或者您可以使用 :nth-of-type 定位它们

 .test span:nth-of-type(1) {
     // this gets you the first one
 }

 .test span:nth-of-type(2) {
     // this gets you the second one
 }

等等