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

可以通过 CSS 选择器,根据 .class 来定位和控制对应的 div 标签吗?

  •  
  •   miniyao · 2017-11-17 12:20:04 +08:00 · 4342 次点击
    这是一个创建于 2548 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有 2 个 div,.class 都是 checkbox,目的是要隐藏( display:none )第 1 个 div。
    如果不用 js 选择 document.getElementsByClassName('checkbox')[0]来定位这个 div,只用 CSS 选择器,可以定位和控制第 1 个 div 吗?

    另外,CSS 选择器通过 id,如 input#id1 只能定位子标签( first-child ),没法逆向查父标签?

    <div class="checkbox">
          <label>
            <input id="id1" name="order" value="y" type="checkbox"> 订单顺序
          </label>
    </div>
    
    <div class="checkbox">
          <label>
            <input id="id2" name="times" value="y" type="checkbox"> 显示次数
          </label>
    </div>
    
    23 条回复    2017-11-18 18:17:03 +08:00
    IamJ
        1
    IamJ  
       2017-11-17 12:23:37 +08:00 via iPhone
    :first-child
    miniyao
        2
    miniyao  
    OP
       2017-11-17 12:26:04 +08:00
    @IamJ 这两个<div>是并行的,不是嵌套关系,:first-child 选不中吧
    IamJ
        3
    IamJ  
       2017-11-17 12:27:22 +08:00 via iPhone   ❤️ 1
    @miniyao 意思是它们可能不在同一个父容器?
    ferrum
        4
    ferrum  
       2017-11-17 12:29:32 +08:00   ❤️ 1
    .checkbox:first-child 是可以选中第一个的,试试就知道。

    第二个问题,不存在根据子元素的特征选中其父元素的 CSS 选择器。
    lianyue
        5
    lianyue  
       2017-11-17 12:30:45 +08:00
    .checkbox + .checkbox
    lianyue
        6
    lianyue  
       2017-11-17 12:32:56 +08:00   ❤️ 1
    噗噗噗看错了 😂 我看成选择第二个了
    .checkbox:first-child input
    lhx2008
        7
    lhx2008  
       2017-11-17 12:35:03 +08:00 via Android
    .checkbox:first-child 无空格是所有.checkbox 的第一个,有空格就是子类容器了
    miniyao
        8
    miniyao  
    OP
       2017-11-17 12:56:57 +08:00
    @ferrum
    @lhx2008

    <style type="text/css">.checkbox:first-child { display: none;}</style>
    我在 chrome 和 firefox 下面都试了无效呀,都选不中;加了空格 .checkbox :first-child 就又把全部的 checkbox 都 display:none 啦
    miniyao
        9
    miniyao  
    OP
       2017-11-17 13:00:50 +08:00
    @IamJ 在同一个父容器,比如<body>里,试了一样,:first-child 也选不中第 1 个 div
    lhx2008
        10
    lhx2008  
       2017-11-17 13:01:53 +08:00   ❤️ 1
    @miniyao
    ```
    <style>.checkbox:first-child { display: none;}</style>
    <div class="checkbox">
    <label>
    <input id="id1" name="order" value="y" type="checkbox"> 订单顺序
    </label>
    </div>

    <div class="checkbox">
    <label>
    <input id="id2" name="times" value="y" type="checkbox"> 显示次数
    </label>
    </div>

    ```
    chrome 就是 第一个 div 隐藏了呀
    SilentDepth
        11
    SilentDepth  
       2017-11-17 13:02:08 +08:00
    CSS 不能逆向查询。但如果两个 .checkbox 总是相邻,而没有第三个 .checkbox 的情况下,可以通过:

    .checkbox { display: none; }
    .checkbox + .checkbox { display: block; }

    这种方式「强行」设定第一个元素的样式(当然通常不建议这么做)。
    miniyao
        12
    miniyao  
    OP
       2017-11-17 13:03:26 +08:00
    @lianyue 其实我也好奇,选第 2 个很好搞,选第 1 个怎么就是麻烦😄
    SilentDepth
        13
    SilentDepth  
       2017-11-17 13:03:29 +08:00
    @lhx2008 #10 :first-child 是说,匹配作为第一个子元素的元素。如果是这种情况:

    <div id="parent">
    <div></div>
    <div class="checkbox"></div>
    </div>

    你通过 :first-child 是选不中那个 .checkbox 的。
    SilentDepth
        14
    SilentDepth  
       2017-11-17 13:08:22 +08:00   ❤️ 1
    @miniyao #12 由于历史原因,CSS 匹配元素的顺序总是自上而下(从 DOM 树根节点想叶子节点)的,所以就不能向上(根据子元素匹配父元素)或向前(根据后面的元素匹配前面的兄弟元素)匹配元素。
    lhx2008
        15
    lhx2008  
       2017-11-17 13:34:38 +08:00
    @SilentDepth 确实,我的用法应该是蜜汁 bug 了,同级选第几个还是用 js 吧
    lianyue
        16
    lianyue  
       2017-11-17 13:56:22 +08:00
    @miniyao
    着么简单呀 你到底什么浏览器 chrome 没问题

    https://jsbin.com/fuzixocuya/1/edit?html,js,output
    miniyao
        17
    miniyao  
    OP
       2017-11-17 14:07:48 +08:00
    @SilentDepth 说的很准确👍 @lhx2008 @lianyue 测试结果不同,看了下,就是 SilentDepth 说的这个情况
    Mutoo
        18
    Mutoo  
       2017-11-17 14:08:17 +08:00
    应该是 :first-of-type 而不是 :first-child
    otakustay
        19
    otakustay  
       2017-11-17 14:14:20 +08:00
    顺便补充下,唯一的“准逆向查询”是:empty
    SilentDepth
        20
    SilentDepth  
       2017-11-17 14:20:05 +08:00
    @Mutoo #18 :first-of-type 只能增强关于 tagName ( div、p 之类的)的匹配,不能用于限定类名。div.checkbox:first-of-type 是匹配「带有 .checkbox 的类名**且**是兄弟元素中第一个出现的 <div>」。楼主的例子里如果 div.checkbox 之前没有其他 div 是可以这样的,如果有就不行了。
    SilentDepth
        21
    SilentDepth  
       2017-11-17 14:25:13 +08:00
    @otakustay #19 嗯,从「由子元素匹配父元素」这个层面上说,:empty 确实是「逆向」的 XD
    sensui7
        22
    sensui7  
       2017-11-17 23:26:23 +08:00
    允许逆向查找可能会导致循环依赖, 比如子元素 B 的样式继承 A, 而 A 的样式又是通过 B 指定的, 这跟元素的 margin 和 padding 的百分比值是相对父元素的宽度一样, 都是为了防止循环依赖.
    nciyuan
        23
    nciyuan  
       2017-11-18 18:17:03 +08:00
    @miniyao 所以说你很牛逼咯
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1833 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 16:36 · PVG 00:36 · LAX 08:36 · JFK 11:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.