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

Question

我注意到一个奇怪的行为并且无法理解为什么会这样，因为它们似乎确实是有效的 CSS class 名称（它们在针对正则表达式进行测试时通过）。在该模式中使用任何其他词都有效，例如 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>

使用 class 名称 sponsor-logo 和 sponsor__logo 效果很好。有人可以解释为什么会这样吗？

Answer 1

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

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

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

Using class="sponsor_logo" or class="sponsor-logo" does not display the div

html

css

sass

stylesheet