有 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 2017-11-17 12:23:37 +08:00 via iPhone
:first-child
|
4
ferrum 2017-11-17 12:29:32 +08:00 1
.checkbox:first-child 是可以选中第一个的,试试就知道。
第二个问题,不存在根据子元素的特征选中其父元素的 CSS 选择器。 |
5
lianyue 2017-11-17 12:30:45 +08:00
.checkbox + .checkbox
|
6
lianyue 2017-11-17 12:32:56 +08:00 1
噗噗噗看错了 😂 我看成选择第二个了
.checkbox:first-child input |
7
lhx2008 2017-11-17 12:35:03 +08:00 via Android
.checkbox:first-child 无空格是所有.checkbox 的第一个,有空格就是子类容器了
|
8
miniyao OP |
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 隐藏了呀 |
11
SilentDepth 2017-11-17 13:02:08 +08:00
CSS 不能逆向查询。但如果两个 .checkbox 总是相邻,而没有第三个 .checkbox 的情况下,可以通过:
.checkbox { display: none; } .checkbox + .checkbox { display: block; } 这种方式「强行」设定第一个元素的样式(当然通常不建议这么做)。 |
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 的。 |
14
SilentDepth 2017-11-17 13:08:22 +08:00 1
@miniyao #12 由于历史原因,CSS 匹配元素的顺序总是自上而下(从 DOM 树根节点想叶子节点)的,所以就不能向上(根据子元素匹配父元素)或向前(根据后面的元素匹配前面的兄弟元素)匹配元素。
|
15
lhx2008 2017-11-17 13:34:38 +08:00
@SilentDepth 确实,我的用法应该是蜜汁 bug 了,同级选第几个还是用 js 吧
|
16
lianyue 2017-11-17 13:56:22 +08:00
|
17
miniyao OP |
18
Mutoo 2017-11-17 14:08:17 +08:00
应该是 :first-of-type 而不是 :first-child
|
19
otakustay 2017-11-17 14:14:20 +08:00
顺便补充下,唯一的“准逆向查询”是:empty
|
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 是可以这样的,如果有就不行了。
|
21
SilentDepth 2017-11-17 14:25:13 +08:00
@otakustay #19 嗯,从「由子元素匹配父元素」这个层面上说,:empty 确实是「逆向」的 XD
|
22
sensui7 2017-11-17 23:26:23 +08:00
允许逆向查找可能会导致循环依赖, 比如子元素 B 的样式继承 A, 而 A 的样式又是通过 B 指定的, 这跟元素的 margin 和 padding 的百分比值是相对父元素的宽度一样, 都是为了防止循环依赖.
|