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我在带有图标的项目上工作得很好。它将班级g-menu-item-title向右移动1.25rem，向上移动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>

有条件地应用CSS

1 个答案: