有 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>
 |
1
IamJ Nov 17, 2017 via iPhone
:first-child
|
 |
4
bayallen Nov 17, 2017  1
.checkbox:first-child 是可以选中第一个的，试试就知道。
第二个问题，不存在根据子元素的特征选中其父元素的 CSS 选择器。 |
 |
5
lianyue Nov 17, 2017
.checkbox + .checkbox
|
|
6
lianyue Nov 17, 2017 1
噗噗噗看错了 😂 我看成选择第二个了
.checkbox:first-child input |
 |
7
lhx2008 Nov 17, 2017 via Android
.checkbox:first-child 无空格是所有.checkbox 的第一个，有空格就是子类容器了
|
 |
8
miniyao OP |
|
10
lhx2008 Nov 17, 2017 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 隐藏了呀 |
 |
11
SilentDepth Nov 17, 2017
CSS 不能逆向查询。但如果两个 .checkbox 总是相邻，而没有第三个 .checkbox 的情况下，可以通过：
.checkbox { display: none; } .checkbox + .checkbox { display: block; } 这种方式「强行」设定第一个元素的样式（当然通常不建议这么做）。 |
|
13
SilentDepth Nov 17, 2017
@lhx2008 #10 :first-child 是说，匹配作为第一个子元素的元素。如果是这种情况：
<div id="parent"> <div></div> <div class="checkbox"></div> </div> 你通过 :first-child 是选不中那个 .checkbox 的。 |
|
14
SilentDepth Nov 17, 2017 1
@miniyao #12 由于历史原因，CSS 匹配元素的顺序总是自上而下（从 DOM 树根节点想叶子节点）的，所以就不能向上（根据子元素匹配父元素）或向前（根据后面的元素匹配前面的兄弟元素）匹配元素。
|
|
15
lhx2008 Nov 17, 2017
@SilentDepth 确实，我的用法应该是蜜汁 bug 了，同级选第几个还是用 js 吧
|
|
16
lianyue Nov 17, 2017
|
|
17
miniyao OP |
 |
18
Mutoo Nov 17, 2017
应该是 :first-of-type 而不是 :first-child
|
 |
19
otakustay Nov 17, 2017
顺便补充下，唯一的“准逆向查询”是:empty
|
|
20
SilentDepth Nov 17, 2017
@Mutoo #18 :first-of-type 只能增强关于 tagName （ div、p 之类的）的匹配，不能用于限定类名。div.checkbox:first-of-type 是匹配「带有 .checkbox 的类名**且**是兄弟元素中第一个出现的 <div>」。楼主的例子里如果 div.checkbox 之前没有其他 div 是可以这样的，如果有就不行了。
|
|
21
SilentDepth Nov 17, 2017
@otakustay #19 嗯，从「由子元素匹配父元素」这个层面上说，:empty 确实是「逆向」的 XD
|
 |
22
sensui7 Nov 17, 2017
允许逆向查找可能会导致循环依赖, 比如子元素 B 的样式继承 A, 而 A 的样式又是通过 B 指定的, 这跟元素的 margin 和 padding 的百分比值是相对父元素的宽度一样, 都是为了防止循环依赖.
|
Select Language