CSS :not(:has(td[rowspan])) 的选择器？

Question

我在 Jquery 中有一个选择器，我想在 CSS 中使用，有没有一种方法可以在 css 中做到这一点？

$('tr:not(:has(td[rowspan])) td').css('text-align', 'center');

例如： https://jsfiddle.net/uydgtvnc/

td:nth-of-type(n+3) {text-align:center;}

这不适用于一个单元格，因为它没有自己的类别 1。所以它在这一行中改为 n+2 。我不希望在 table 结构

中添加任何类 / 样式

Answer 1

CSS 中 :has 的完全等价物是不可能的，但我从您的评论中得知您想 select 具体 td s 取决于是否先 td在tr有没有rowspan。这是可以做到的。

th {
  background: #555;
  color: #fff;
}

th.dark {
  background: #333;
}

/*td:nth-of-type(n+3) {text-align:center;}*/

td:first-child[rowspan] ~ td:nth-of-type(n+3),
td:first-child:not([rowspan]) ~ td:nth-of-type(n+2) {
  text-align: center;
}

<table id="mylist">
  <thead>
    <tr>
      <th scope="col" rowspan="2">Category</th>
      <th scope="col" rowspan="2">Category 2</th>
      <th scope="colgroup" colspan="5" class="dark">Headline 1</th>
      <th scope="colgroup" colspan="4" class="dark">Headline 2</th>
    </tr>
    <tr>
      <th scope="col">Term 1</th>
      <th scope="col">Term 2</th>
      <th scope="col">Term 3</th>
      <th scope="col">Full</th>
      <th scope="col">Double</th>
      <th scope="col">Term 1</th>
      <th scope="col">Term 2</th>
      <th scope="col">Full</th>
      <th scope="col">Double</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Category 1 Line</td>
      <td>Category 2 Line</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
      <td>x</td>
      <td>x</td>
      <td> </td>
    </tr>
    <tr>
      <td>Category 2 Line </td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
      <td> </td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
    </tr>
  </tbody>
</table>

如果这不是您想要的，请发表评论！

CSS :not(:has(td[rowspan])) 的选择器？

CSS Selector for :not(:has(td[rowspan]))?

css

css-selectors

pseudo-element