当span元素为空时如何不显示CSS填充

XomosX

我一直在尝试解决以下问题。

如果运行此代码,您会注意到蓝色和红色元素。当没有文本要显示(跨度为空)时,如何隐藏“红色元素”。我想对“蓝色元素”做同样的事情,因为里面没有文本不可见。之所以显示该字段,是为了填充,但是我想进行填充,因为它看起来不错。我相信你们都是最好的,并且找到解决方案。问候!

.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; 
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>

卢卡·德托米(Luca Detomi)

如果不需要IE8支持,则可以使用伪代码:empty此处提供更多示例.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="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>

在其中插入了两个<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 不为null时,才应用所有属性。

这对于这种特定情况是等效的,但是如果您也想在空的情况下也看到此DIV,仅限于重置填充(例如,由于其具有固定的大小或边框),则必须使用第一个解决方案,而不要使用更紧凑的解决方案。


关于:empty伪类的知识很少

前面的示例仅在空元素实际上为empty时才能正确运行,这意味着此代码<span class="myClassDie"></span>已正确定位,而该代码(包含空格)<span class="myClassDie"> </span>不是正确的。

通常,这可能是一个问题,因为通常代码是动态生成的,或者由于代码缩进而包含空格。

过去,Mozilla引入了其专有的伪类:-moz-only-whitespace,但是目前还没有其他浏览器支持此伪类

W3还尝试解决此类问题,最初是:blank在“选择器级别3”中使用模拟伪类(同样没有浏览器支持),但这并未取得预期的成功。

因此,自2018年初以来,W3修改了其定义以表示空用户输入,而不是空元素,并同时修改了:empty定义以考虑空格,但目前在不同的浏览器中也未实现最后一个功能

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如果ERB中的条件为真,如何不显示HTML和CSS

如果messages对象为空,如何使用renderMessage,renderMessageImage函数以及如何不显示未显示的消息

如何不使用 CSS 显示元素

我如何不显示价格超过???的元素?从容器

R Shiny:NULL时如何不显示图

立即单击按钮时如何不显示工具提示?

激活virtualenv时如何不显示路径

使用mysqli时如何不显示重复错误

绘制散景时如何不显示 GlyphRenderer 表?

更改用户时如何不显示密码?

如何不显示值

如何不显示 0 与 IF

当listView为空时,setEmptyView不显示图像

当observable为空时,骨架文本不显示

在悬停时如何突出显示元素内的文本,而不是整个元素及其填充?CSS / HTML

在将html附加到元素时如何不丢失CSS?

如何不显示重复的文字?

如何不显示亚马逊的结果

如何不显示 XMLNAMESPACES 别名

如何不显示选定的列?

我如何检查行是否为空然后不显示?

css属性如何不显示任何内容,并且块在html文件中起作用?

尝试在表单提交时在span元素上设置内部HTML-不显示

当我尝试以反应方式打印时,道具如何不显示

批量创建文本文件时如何不显示提示框?

Flutter:当没有链接时,如何不显示占用空间的小部件?

使用bootstrap-datepicker时如何不显示移动键盘?

当开始使用videojs播放视频时,如何不显示字幕?

启动时如何不显示数据库中的数据?