css 选择器 可以过滤后的选择吗？

[coderabbit]

html 结构体

<tr>
<th class="ta-table__cell ta-table__column">Postcode</th>
<th class="ta-table__cell ta-table__column" style="text-align: center;">Action</th><th class="ta-table__cell ta-table__column ta-table__hidden">Name</th>
<th class="ta-table__cell ta-table__column ta-table__hidden">Age</th>
<th class="ta-table__cell ta-table__column ta-table__hidden">Province</th>
<th class="ta-table__cell ta-table__column ta-table__hidden">City</th>
<th class="ta-table__cell ta-table__column ta-table__hidden">Address</th>
</tr>

现在我想 非

ta-table__hidden

类的最后一个元素去掉它的边框， 也就是 Action 例

border-right-color: transparent

但是我通过选择器排除不掉，last-child 也是父子的最后一个又并不是指定某个元素的最后一个。

[SxqSachin]

tr th:not(.ta-table__hidden):not(:first-child)

[maichael]

@SxqSachin #1 你这个当 Action 前面有不止一个元素的时候就不行了。

[maichael]

以现有浏览器支持做不到，https://caniuse.com/#feat=css-nth-child-of 。这个语法暂时只有 safari 支持。

所以只能用 JS 实现。不然就直接给那个元素加一个额外的 class 好一点。

[coderabbit]

@SxqSachin 这个也有局限性，如果有三个或更多的 th 没有 ta-table__column 它也不生效了！

[coderabbit]

@maichael 我加的额外元素也要选择最后一个才行，要么写一些判断它是隐藏前最后一个元素！

[932357832]

还没有发现可行的解决方案...
不过可以考虑一下把边框线做在左边，这样即使隐藏了也不用专门处理。

th + th{
border-left:1px solid #111;
}

.ta-table__hidden{
display:none;
}

[SilentDepth]

如果允许使用左边框，倒是容易许多：

.ta-table__column:not(.ta-table__hidden) ~ .ta-table__column:not(.ta-table__hidden) {
border-left: 1px solid #f0f;
}

目前 CSS 选择器总体上是由外到内、由前到后定位元素的，所以反过来就很难办。

---

V2EX 回帖发代码太难受了……站长（或 V2EX plus 的作者）考虑考虑？

[rain0002009]

要不咱换个思维
.ta-table__hidden 看着感觉是要隐藏的，要不咱直接删掉它 这样选择器是不是就简单了
或者咱反向操作
把所有元素隐藏，添加.show 的元素才显示，这样是不是也简单了

[dfkjgklfdjg]

css 你可以往后往下选择元素,但是不能往前往上选择