作者:每天还贷的飞鱼 | 来源:互联网 | 2023-05-21 08:54
是否可以创建一个条件div显示取决于是否存在另一个div的内容?我正在寻找一个只有CSS的解决方案.
我以前用过这样的东西:
.myClass:empty:before {
content: 'content added to empty div';
}
将内容添加到空div.但由于无法在创建的伪内容中创建超链接,我正在寻找另一种方式.
所以让我们假设我的div结构如下:
This should be displayed
如果div1为空,是否可以执行css技巧来显示div2; 但如果div1有内容,请隐藏它?
随意重构div层次结构,我正在寻找的不依赖于当前的div结构.
寻找想法.谢谢.
1> David Thomas..:
我建议:
/* hiding the div.div2 element (and its content)
if it's the next element-sibling of div.div1: */
div.div1 + div.div2 {
display: none;
}
/* selecting the div.div2 element which is the next
element-sibling of an empty (div.div1:empty)
div.div1 element: */
div.div1:empty + div.div2 {
display: block;
}
/* hiding the div.div2 element (and its content)
if it's the next element-sibling of div.div1: */
div.div1 + div.div2 {
display: none;
}
/* selecting the div.div2 element which is the next
element-sibling of an empty (div.div1:empty)
div.div1 element: */
div.div1:empty + div.div2 {
display: block;
}
div.div1 {
border: 1px solid #f00;
color: #f00;
}
div.div2 {
color: #0f0;
border: 1px solid #0f0;
margin-bottom: 1em;
}
This should be displayed
This is 'div.div1' (it has content)
This should not be displayed
2> 小智..:
使用css- next element selecor
.div1:empty + div{
content: 'content added to empty div';
}