某些CSS选择器

Question

假设图像（由于请求而更改为实际工作表）是html <table>的示例，其<th>实现了不同的colspan和rowspan。在给定的图片中，是否有原生css选择器可以选择直接与<th>的底部水平边界相交的所有<thead>，或者实现此目的的唯一方法是提供这些具有特定class的指定单元格？

Answer 1

有一种方法可以使用nth-last-child选择器和rowspan的组合来实现这一点，但是如果你希望它能够处理绝对的任何组合，它看起来会有点复杂和笨拙。

该算法实际上是tr:nth-last-child(x) th[rowspan >= x]

不幸的是，纯CSS不允许你写这个，所以你必须把它分解成部分。

基本上，你知道如果标题的最后一行有任何内容，那么它就会越过边界。要捕获这些元素，您只需要选择最后一个tr中的所有元素：

tr:last-child th { /*your CSS*/ }

然后它变得复杂了。如果其行距足够高以至于它们跨越行和边界之间的其余行，则其他元素将触及底部边界。也就是说，如果它们位于倒数第二个tr，则它们需要2的行数才能触及底部。如果它们位于倒数第4行（在上面的例子中，第一行），那么它们需要4的行数。所以，你可以这样做：

tr:nth-last-child(2) th[rowspan='2'],
tr:nth-last-child(3) th[rowspan='3'],
tr:nth-last-child(4) th[rowspan='4'] { /*Your CSS */ }

它不漂亮，但它可以工作，只要你知道你需要应对的最大行数，显然你需要单独列出它们，只要你想将它保持为纯CSS。

有漏洞 - 在第二排的第二行可能会有一个3的行距触及底部，但我假设桌子设计正确，这样的坏东西不会不会发生。如果你想要你可以考虑到这一点，但它会增加很多复杂性，因为你需要添加第二行，rowspan＆gt; = 2（CSS不会在属性选择器中执行这样的数学运算，所以你' d必须单独列出所有＆gt; = 2个值。

可能有一种方法可以使用像SASS或LESS这样的东西来清理它（肯定在JQuery中很容易做到），但据我所知，没有纯CSS方法来清理它。如果有人知道某种方式，请告诉我！

更新：我创建了一个JSFiddle的编辑，其他人开始Here以证明我的意思

Answer 2

是的，您可以使用属性选择器和（如果需要）nth-of-type（）来捕获这些。

所以，例如：

iOS 9

都是有效的CSS选择器，可以捕获你想要的东西。

当然，：nth-​​of-type（n）选择器可以附加到父级，作为“过滤器”，用于选择具有某个colspan的那个。