Css 在列表中选择类型div的第一个，该列表中的所有类型都具有状态it'的数据属性；与…有关的

我有一个动态创建的元素列表，这些元素是处于特定状态的作业。每个州可能有不止一份工作，我正在尝试选择每个州的第一份，但不只是这个巨大列表中的第一份。例如：

<section class="careers">
<div data-state="career-illinois">...</div>
<div data-state="career-illinois">...</div>
<div data-state="career-illinois">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-michigan">...</div>
<div data-state="career-ohio">...</div>
<div data-state="career-ohio">...</div>
</section>

---

但那没用。我用jQuery尝试了几种方法来瞄准它，但没有成功。甚至不确定这是否可行？

一种方法是循环查看div并跟踪是否已经看到具有该数据属性的div

var作业=[]；
$（'section.careers div'）。每个（函数（）{
如果（$.inArray（$（this.data（'state'），jobs）==-1）{//尚未遇到具有此数据属性的元素
jobs.push（$（this.data（'state'））；//将数据属性添加到跟踪数组中
$（this.addClass（'first'））
}
})

。首先{
颜色：#636467；
}

...
...
...
...
...
...
...
...

请参阅，以了解为什么不能这样做以及解决方法。另一个问题是，当元素没有类时，您正在选择一个类；他们有一个自定义的数据属性。是的，我很喜欢。最初，我找到了一种解决方法，将每组div包装在一个单独的范围内，用于目标定位。但我不得不让它折叠起来，以保持我的布局，这感觉很恶心。

.careers div[class*="career-"]:nth-of-type(1) h2 {
  color: #636467;
}