如何在没有特定类的CSS中选择第一次出现的HTML元素？

Question

我正在尝试使用CSS在datepicker中设置特定元素的样式。虽然我认为使用第n个选择器一定非常简单，但我似乎无法弄清楚它是如何可能的。

我有这样的CSS和HTML代码：

＆＃13;

＆＃13;

.ui-datepicker tr td:not(.ui-state-disabled) + td:nth-of-type(1)
{
  background-color: red;
}

＆＃13;

<table class="ui-datepicker">
  <tr>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td>
      This is the td element I like to select
    </td>
    <td>
      ...
    </td>
  </tr>
</table>
<table class="ui-datepicker">
  <tr>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td>
      This is the td element I like to select
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

我想在最后一个td元素之后选择第一个ui-state-disabled元素。问题是td元素的位置以及td元素的数量并不总是相同的。您可以在代码段的CSS代码中查看我尝试过的内容，但它无法正常工作。我正在寻找的是第一次出现＆＃34;选择。有没有办法只用CSS来完成这个？

Answer 1

td.ui-state-disabled + td:not(.ui-state-disabled) {
color: red;
}

<table class="ui-datepicker">
  <tr>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
</table>
<table class="ui-datepicker">
  <tr>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td class="ui-state-disabled">
      ...
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
    <td>
      ...
    </td>
  </tr>
</table>