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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2568 天前的主题，其中的信息可能已经有所发展或是发生改变。

有 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

2017-11-17 12:23:37 +08:00 via iPhone

:first-child

miniyao

2017-11-17 12:26:04 +08:00

@IamJ 这两个<div>是并行的，不是嵌套关系，:first-child 选不中吧

IamJ

2017-11-17 12:27:22 +08:00 via iPhone

@miniyao 意思是它们可能不在同一个父容器？

ferrum

2017-11-17 12:29:32 +08:00

.checkbox:first-child 是可以选中第一个的，试试就知道。

第二个问题，不存在根据子元素的特征选中其父元素的 CSS 选择器。

lianyue

2017-11-17 12:30:45 +08:00

.checkbox + .checkbox

lianyue

2017-11-17 12:32:56 +08:00

噗噗噗看错了 😂 我看成选择第二个了
.checkbox:first-child input

lhx2008

2017-11-17 12:35:03 +08:00 via Android

.checkbox:first-child 无空格是所有.checkbox 的第一个，有空格就是子类容器了

miniyao

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

2017-11-17 13:00:50 +08:00

@IamJ 在同一个父容器，比如<body>里，试了一样，:first-child 也选不中第 1 个 div

lhx2008

2017-11-17 13:01:53 +08:00

@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

2017-11-17 13:02:08 +08:00

CSS 不能逆向查询。但如果两个 .checkbox 总是相邻，而没有第三个 .checkbox 的情况下，可以通过：

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

这种方式「强行」设定第一个元素的样式（当然通常不建议这么做）。

miniyao

2017-11-17 13:03:26 +08:00

@lianyue 其实我也好奇，选第 2 个很好搞，选第 1 个怎么就是麻烦😄

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

2017-11-17 13:08:22 +08:00

@miniyao #12 由于历史原因，CSS 匹配元素的顺序总是自上而下（从 DOM 树根节点想叶子节点）的，所以就不能向上（根据子元素匹配父元素）或向前（根据后面的元素匹配前面的兄弟元素）匹配元素。

lhx2008

2017-11-17 13:34:38 +08:00

@SilentDepth 确实，我的用法应该是蜜汁 bug 了，同级选第几个还是用 js 吧

lianyue

2017-11-17 13:56:22 +08:00

@miniyao
着么简单呀你到底什么浏览器 chrome 没问题

https://jsbin.com/fuzixocuya/1/edit?html,js,output

miniyao

2017-11-17 14:07:48 +08:00

@SilentDepth 说的很准确👍 @lhx2008 @lianyue 测试结果不同，看了下，就是 SilentDepth 说的这个情况

Mutoo

2017-11-17 14:08:17 +08:00

应该是 :first-of-type 而不是 :first-child

otakustay

2017-11-17 14:14:20 +08:00

顺便补充下，唯一的“准逆向查询”是:empty

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

2017-11-17 14:25:13 +08:00

@otakustay #19 嗯，从「由子元素匹配父元素」这个层面上说，:empty 确实是「逆向」的 XD

sensui7

2017-11-17 23:26:23 +08:00

允许逆向查找可能会导致循环依赖, 比如子元素 B 的样式继承 A, 而 A 的样式又是通过 B 指定的, 这跟元素的 margin 和 padding 的百分比值是相对父元素的宽度一样, 都是为了防止循环依赖.

nciyuan

2017-11-18 18:17:03 +08:00

@miniyao 所以说你很牛逼咯