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

2017-11-17 12:20:04 +08:00
 miniyao

有 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>
4351 次点击
所在节点    CSS
23 条回复
IamJ
2017-11-17 12:23:37 +08:00
:first-child
miniyao
2017-11-17 12:26:04 +08:00
@IamJ 这两个<div>是并行的，不是嵌套关系，:first-child 选不中吧
IamJ
2017-11-17 12:27:22 +08:00
@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
.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 是可以这样的，如果有就不行了。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/407194

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX