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

Question

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

我有这样的 CSS 和 HTML 代码:

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

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

我想选择最后一个 ui-state-disabled 元素之后的第一个 td 元素。问题在于 td 元素的位置以及 td 元素的数量并不总是相同。您可以看到我在代码段的 CSS 代码中尝试过的内容，但它不起作用。我正在寻找的是“第一次出现”的选择器。有什么方法可以仅使用 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>