：具有多个类的表中的第一个类型不起作用[重复]答案

【问题标题】：:first-of-type in table with multiple classes doesn't work [duplicate]：具有多个类的表中的第一个类型不起作用[重复]
【发布时间】：2016-10-14 05:31:04
【问题描述】：

我正在尝试用特定的类 (wpcw_fe_unit_pending) 捕获 第一个 tr。但是由于某种原因它不起作用。

这是我迄今为止尝试过的。

tr.wpcw_fe_unit.wpcw_fe_unit_pending.wpcw_fe_module_group_1:first-of-type td.wpcw_fe_unit {
  border-left: 2px solid red;
}

<table id="wpcw_fe_course" class="wpcw_fe_table" cellspacing="0" cellborder="0">
  <tbody>
    <tr class="wpcw_fe_module " id="wpcw_fe_module_group_1">
      <td>Module 1</td>
      <td colspan="2">Topic</td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_complete wpcw_fe_module_group_1">
      <td>Unit 1</td>
      <td class="wpcw_fe_unit"><a href="">1st Unit - Done</a>
      </td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_complete"><span>&nbsp;</span>
      </td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_complete wpcw_fe_module_group_1">
      <td>Unit 2</td>
      <td class="wpcw_fe_unit"><a href="">2nd Unit - Done</a>
      </td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_complete"><span>&nbsp;</span>
      </td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1">
      <td>Unit 3</td>
      <td class="wpcw_fe_unit"><a href="">3rd Unit - Done</a>
      </td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span>
      </td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1">
      <td>Unit 4</td>
      <td class="wpcw_fe_unit">4th Unit</td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span>
      </td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1">
      <td>Unit 5</td>
      <td class="wpcw_fe_unit">5th Unit</td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span>
      </td>
    </tr>
    <tr class="wpcw_fe_unit wpcw_fe_unit_pending wpcw_fe_module_group_1">
      <td>Unit 6</td>
      <td class="wpcw_fe_unit">6th Unit</td>
      <td class="wpcw_fe_unit_progress wpcw_fe_unit_progress_incomplete"><span>&nbsp;</span>
      </td>
    </tr>
  </tbody>
</table>

这是Codepen。

【问题讨论】：

因为:first-of-type 不是这样工作的。它在父元素下选择其类型的第一个元素，而不是与类选择器匹配的类型的第一个元素。
一个类不是一个类型，它是一个类。您可能想要一个一流的伪类，但它不存在。
哦，废话。 css 有没有可能解决这个任务？
目前在 CSS 规范中实际上没有方法可以通过类的 nth 实例选择元素。
stackoverflow.com/a/6447072/1063673

标签： css css-selectors

【解决方案1】：

first-of-type 伪类只查看元素。 class 属性被忽略。

6.6.5.8. :first-of-type pseudo-class

同:nth-of-type(1)。

:first-of-type 伪类表示一个元素，它是其父级的子级列表中其类型的第一个同级元素。

【讨论】：