我一直在努力解决以下问题.
如果您运行此代码,您会注意到蓝色和红色元素.
当没有要显示的文本(span为空)时,如何隐藏“红色元素”.我想用’蓝色元素’做同样的事情,当里面没有文字时,它应该是不可见的.
显示的原因是填充,但我想填充,因为它看起来不错.
我相信你们是最好的,并找到解决方案.
问候!
.myClassDer {
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie {
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
最佳答案
如果您不需要support for IE8,则可以使用伪状态:空(here for more examples)来重置无内容的.myClassDie实例的填充,使用以下代码.
.myClassDie:empty
{
padding:0;
}
更新您的工作示例,它变为:
.myClassDer
{
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie:empty
{
padding:0;
}
我在其中插入了两个< span class =“myClassDie”>向您展示有和没有内容的行为.
由于“空”案例的有效隐形,如果您想要一个更紧凑的解决方案,您可以将两个单独的规则折叠成一个,只需设置:
.myClassDie:not(:empty)
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
在这种情况下,仅当.myClassDie不为空时,您才会应用所有属性.
这对于这种特定情况是等效的,但是如果你想看到这个DIV也是空的,只限于重置填充(例如因为它有固定的大小或边框),你必须使用第一个解决方案,而不是更紧凑的解决方案.
原文地址:https://www.jb51.cc/html/426057.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。