当我在另一个元素上显示时，为什么这个元素会部分消失？

Question

为什么我在下面的ul.languages CSS中使用display：none属性时，图像2中的电话号码会消失？这里是JS小提琴的链接，如下所述改变CSS会产生同样的效果：https://jsfiddle.net/bpjavascript/31z5t24u/

我没有设置原始的CSS / html，但似乎在这种情况下是2个块级元素＆＃34;＆＃34;和＆＃34;＆＃34;不会以这种方式相互影响。

图片1 - 使用语言块正确显示电话号码

图片2 - 手机消失并关闭屏幕

如果我添加＆＃34;显示：无＆＃34;在下面的CSS中，电话号码部分消失，如图2所示

header.branding section.scctsi ul.languages {
      float: right;
      position: relative;
      top: 5px; 
       }

Answer 1

你正在使用的css过于复杂和具体它不是部分隐藏它只是被这个类覆盖

header.branding section.scctsi:before, header.branding section.scctsi:after {
content: "";
position: absolute;
background: #fff;
/* Match the background */
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */ }

如果你还添加一个display：none;该类别的财产将再次显示电话号码。