入れ子になったHTMLタグを選択するにはどうすればよいですか？

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> 

私は100pxにiにタグの高さの背景画像のサイズを変更しようとしています。私は、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; 
}