V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
coderabbit
V2EX  ›  CSS

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

  •  
  •   coderabbit · 2020-04-22 12:45:09 +08:00 · 1991 次点击
    这是一个创建于 1706 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    9 条回复    2020-05-15 11:32:30 +08:00
    SxqSachin
        1
    SxqSachin  
       2020-04-22 13:37:52 +08:00
    tr th:not(.ta-table__hidden):not(:first-child)
    maichael
        2
    maichael  
       2020-04-22 13:38:50 +08:00
    @SxqSachin #1 你这个当 Action 前面有不止一个元素的时候就不行了。
    maichael
        3
    maichael  
       2020-04-22 13:46:34 +08:00
    以现有浏览器支持做不到,https://caniuse.com/#feat=css-nth-child-of 。这个语法暂时只有 safari 支持。

    所以只能用 JS 实现。不然就直接给那个元素加一个额外的 class 好一点。
    coderabbit
        4
    coderabbit  
    OP
       2020-04-22 14:23:08 +08:00
    @SxqSachin 这个也有局限性,如果有三个或更多的 th 没有 ta-table__column 它也不生效了!
    coderabbit
        5
    coderabbit  
    OP
       2020-04-22 14:24:08 +08:00
    @maichael 我加的额外元素也要选择最后一个才行,要么写一些判断它是隐藏前最后一个元素!
    932357832
        6
    932357832  
       2020-04-22 17:00:56 +08:00
    还没有发现可行的解决方案...
    不过可以考虑一下把边框线做在左边,这样即使隐藏了也不用专门处理。

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

    .ta-table__hidden{
    display:none;
    }
    SilentDepth
        7
    SilentDepth  
       2020-04-22 18:01:27 +08:00
    如果允许使用左边框,倒是容易许多:

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

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

    ---

    V2EX 回帖发代码太难受了……站长(或 V2EX plus 的作者)考虑考虑?
    rain0002009
        8
    rain0002009  
       2020-04-22 21:21:56 +08:00
    要不咱换个思维
    .ta-table__hidden 看着感觉是要隐藏的,要不咱直接删掉它 这样选择器是不是就简单了
    或者咱反向操作
    把所有元素隐藏,添加.show 的元素才显示,这样是不是也简单了
    dfkjgklfdjg
        9
    dfkjgklfdjg  
       2020-05-15 11:32:30 +08:00
    css 你可以往后往下选择元素,但是不能往前往上选择
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2589 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:29 · PVG 23:29 · LAX 07:29 · JFK 10:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.