有条件地应用CSS

Question

我有一个需要应用的样式只有如果有图标，但没有图标。

HTML结构与图示如下：

<li class="g-menu-item g-menu-item-226 g-menu-item-type-component g-standard"> 
    <a class="g-menu-item-container" href="/en/services/visas"> 
    <i class="fa fa-id-badge"></i> 
    <span class="g-menu-item-content"> 
     <span class="g-menu-item-title">Visas</span> 
    </span> 
    </a> 
</li> 

结构没有图示如下：

<li class="g-menu-item g-menu-item-232 g-menu-item-type-component g-standard"> 
    <a class="g-menu-item-container" href="/en/destinations/australia/adelaide"> 
    <span class="g-menu-item-content"> 
     <span class="g-menu-item-title">Adelaide</span> 
    </span> 
    </a> 
</li> 

我曾经在一个图标的项目运行良好的SCSS。它通过1.25rem和最多的移动跨度类g-menu-item-title向右通过1rem：

.aside-nav { 
    .g-menu-item-container { 
    .g-menu-item-content { 
     margin-left: 1.25rem !important; 
     margin-top: -1rem !important; 
    } 
    } 
} 

但是，如果没有图标，它使压扁到对方的边栏的菜单项。

如何更改此SCSS，以便它仅适用于项目具有图标的旁边的菜单项，而不适用于没有图标的菜单项。

Answer 1

您可以使用Adjacent sibling selector，

它会让你的目标元素旁边另一个元素：

i + .g-menu-item-content { 
 
    margin-left: 1.25rem !important; 
 
    margin-top: -1rem !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<ul> 
 
<li class="g-menu-item g-menu-item-232 g-menu-item-type-component g-standard"> 
 
    <a class="g-menu-item-container" href="/en/destinations/australia/adelaide"> 
 
    <span class="g-menu-item-content"> 
 
     <span class="g-menu-item-title">Adelaide</span> 
 
    </span> 
 
    </a> 
 
</li> 
 

 
<li class="g-menu-item g-menu-item-226 g-menu-item-type-component g-standard"> 
 
    <a class="g-menu-item-container" href="/en/services/visas"> 
 
    <i class="fa fa-id-badge"></i> 
 
    <span class="g-menu-item-content"> 
 
     <span class="g-menu-item-title">Visas</span> 
 
    </span> 
 
    </a> 
 
</li> 
 
</ul>