html - 使用 class ="sponsor_logo"或 class ="sponsor-logo"不会显示 div

Question

我注意到一个奇怪的行为，并且无法理解为什么会发生这种情况，因为它们似乎确实是有效的 CSS 类名(在针对正则表达式进行测试时它们通过了)。 使用该模式中的任何其他单词都可以，例如 happy-world 或 happy_world。 我在这里创建了一个 Codepen 来展示我所经历的事情。检查这里https://codepen.io/akhatri7/pen/LYxMgOz

div {
  min-height: 50px;
  width: 50px;
  margin-bottom: 10px;
}

.sponsorlogo {
  background-color: violet;
}

.sponsor-logo {
  background-color: indigo;
}

.sponsor_logo {
  background-color: blue;
}

.sponsor__logo {
  background-color: green;
}

.happy-world {
  background-color: yellow;
}

.happy_world {
  background-color: red;
}

<div class="sponsorlogo"></div>
<div class="sponsor-logo"></div>
<div class="sponsor_logo"></div>
<div class="sponsor__logo"></div>
<div class="happy-world"></div>
<div class="happy_world"></div>

使用类名 sponsor-logo 和 sponsor__logo 效果很好。 有人可以解释一下为什么会发生这种情况吗？

Answer 1

带有类 sponsor-logo 和 sponsor_logo 的 div 也没有为我显示。但经过进一步检查，我发现这两个 div 的 display 属性被注入(inject)的样式表设置为 none。

注入(inject)样式表是 Chrome 扩展程序可以注入(inject)到页面中的样式表。罪魁祸首是 Adblock Plus，禁用该扩展程序，您将看到结果如预期。