html - 如何选择嵌套的 html i 标签？

Question

我的代码包括以下内容:

<div class="site-logo">
  <a href="https://www.fakedomain.net/index.php/" class="site-logo-link">
    <span class="site-logo-icon">
      <i style="background-image:url(https://www.fake.net/logos/image.png)"></i>
    </span>
      <span class="site-logo-name" style="display:none;">asdfasdf</span>
  </a>
</div>

我正在尝试将 i 标签的高度背景图像调整为 100 像素。我意识到我可以在 i 标签中插入内联样式；但是，我宁愿在 .css 文件中更改高度。我试过没有成功:

.site-logo-icon i {
    height: 100px;
}

Answer 1

您可以使用 inline-block 来允许使用高度和宽度。

您还应该将背景图片放在 CSS 中，或者使用 img 标签。

.site-logo-icon i {
    display: inline-block;
    height: 100px;
    background-image:url('https://www.fake.net/logos/image.png');
}