我的HTML代码基本上
<div class="a"> <div class="b"> ... </div> </div> <div class="c"> ... </div>
现在我想把display: none;应用到c上,但前提是b存在。a和c总是存在的。我的方法是
display: none;
.a .b ~ .c { display: none; }
nom7f22z1#
这应该对你有用:
var b = document.querySelector('.b'); if (b) { document.querySelector('.c').style.display = 'none'; }
<div class="a">a <div class="b">b</div> </div> <div class="c">c</div>
显然,JavaScript是必需的,但只是一个触摸。您可以将document.querySelector('.b)添加到if语句中,而不是将其保存到变量中。
document.querySelector('.b)
if
编辑:这里只需要稍微说明一下代码的问题--首先选择.a .b,如果b类是a类的后代,则会选择b类,然后使用一般的兄弟组合子(后继-同级组合子),但它不会选择c类。这是因为c类在a元素之外,因此不是a类的后代。一个纯粹的CSS解决方案是将c类放在a元素中,这样就可以使当前的CSS正常工作,而不需要JavaScript。例如,HTML如下所示:
.a .b
b
a
c
一个二个一个一个general sibling combinator~运算符将查找b之后类为c的任何后续元素。如果您只想将其应用于b之后类为c的第一个元素,请考虑使用adjacent sibling selector+,也称为“下一同级组合子”。
~
+
5f0d552i2#
现在(2023年)可以使用:has()伪类选择器来实现这一点,它匹配具有特定后代的元素,如果是,那么我们可以使用一般的兄弟选择器来选择“.c”
<div class="a"> <div class="b"> <p>Content inside b</p> </div> </div> <div class="c"> <p>Content inside c</p> </div>
.a:has(.b)~.c { display: none; }
输出
ttygqcqt3#
CSS :empty可以识别div是否有内容
:empty
.c:empty { display: none; }
<div class="a"> <div class="b"> lorem </div> </div> <div class="c"></div>
3条答案
按热度按时间nom7f22z1#
这应该对你有用:
显然,JavaScript是必需的,但只是一个触摸。您可以将
document.querySelector('.b)
添加到if
语句中,而不是将其保存到变量中。编辑:这里只需要稍微说明一下代码的问题--首先选择
.a .b
,如果b
类是a
类的后代,则会选择b
类,然后使用一般的兄弟组合子(后继-同级组合子),但它不会选择c
类。这是因为c
类在a
元素之外,因此不是a
类的后代。一个纯粹的CSS解决方案是将c
类放在a
元素中,这样就可以使当前的CSS正常工作,而不需要JavaScript。例如,HTML如下所示:一个二个一个一个
general sibling combinator
~
运算符将查找b
之后类为c
的任何后续元素。如果您只想将其应用于b
之后类为c
的第一个元素,请考虑使用adjacent sibling selector+
,也称为“下一同级组合子”。5f0d552i2#
现在(2023年)可以使用:has()伪类选择器来实现这一点,它匹配具有特定后代的元素,如果是,那么我们可以使用一般的兄弟选择器来选择“.c”
输出
ttygqcqt3#
CSS
:empty
可以识别div是否有内容