如何选择嵌套的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标签的高度背景图片调整为100px。我意识到我可以在i标签中插入内联样式;但是，我宁愿在.css文件中更改高度。我尝试没有成功：

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

Answer 1

您可以使用内嵌块来允许使用高度和宽度。

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

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

Answer 2

您必须将i标记设置为块级元素：

.site-logo-icon i {
     display: block;
}