Question

我尝试使用特定类（tr）捕获第一个 wpcw_fe_unit_pending。但它出于某种原因并不起作用。

这是我到目前为止所尝试的内容。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

这是Codepen。

Answer 1

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

6.6.5.8. :first-of-type pseudo-class

与:nth-of-type(1)相同。

:first-of-type伪类表示一个元素   在其父级子级列表中的第一个兄弟类型   元件。

：具有多个类的表中的第一个类型不起作用

1 个答案: