未分類
13 7 月 2020

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

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

資深大佬 : coderabbit 29

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 也是父子的最后一个又并不是指定某个元素的最后一个。

大佬有話說 (8)

  • 資深大佬 : 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 的元素才显示，这样是不是也简单了