在页面上查找第一个CSS类

Question

我有一个充满元素的页面。我只想匹配CSS选择器中的第一个元素。

我尝试过sibling selector、first-child和first-of-type，但它们都只在有兄弟姐妹的结构中工作。就我而言，我有不同的深度，这让事情变得更难。

.match ~ .match {
background:red;
}
.match:first-child {
background: green;
}
.match:first-of-type {
background: yellow;
}

<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>

它应该找到类为.match的第一个元素。

我不会接受像div > div > .match这样的答案，因为它找不到元素，因为我们告诉它在哪里查找。

Answer 1

这在纯CSS中是不可能的。如果HTML是静态的，您可以添加一个ID或另一个类，就像Snake_py建议的那样。如果您可以使用脚本，document.querySelector方法将返回选择器的第一个匹配项，因此您可以执行以下操作：(参见代码片段(

document.querySelector('.match').classList.add('match-active')

.match-active {
background:red;
}

<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>