html span显示后消失,html – 当span元素为空时,如何不显示css填充

如果您不需要

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;

}

here

ClassDie but with content

我在其中插入了两个< 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也是空的,只限于重置填充(例如因为它有固定的大小或边框),你必须使用第一个解决方案,而不是更紧凑的解决方案.