如何在没有链接的情况下仅为图标添加样式？

Question

我正在构建React / Redux应用程序，我想知道是否可以仅将样式应用于没有链接的图标。我使用标签形式的fontawesome图标，并用标签包装。我想只在父标签的href属性中没有值时才将图标变为灰色。

  <ul>
    <li>
      <a href={test.officialLinks.Reddit} target="_blank">
        <i className="fab fa-reddit-alien"></i>
      </a>
    </li>
    <li>
      <a href={test.officialLinks.Website} target="_blank">
        <i className="fas fa-globe"></i>
      </a>
    </li>
  </ul>

Answer 1

您可以在组合选择器中为a标记使用空属性选择器，如下所示（我将其设置为红色以使其更明显）：

a > i {
color: green;
}
a[href=""] > i {
  color:red;
}

<ul>
    <li>
      <a href="http://www.example.com" target="_blank">
        <i className="fab fa-reddit-alien">icon_placeholder</i>
      </a>
    </li>
    <li>
      <a href="" target="_blank">
        <i className="fas fa-globe">icon_placeholder</i>
      </a>
    </li>
  </ul>

Answer 2

你可以，如果没有链接的<i>标签不会被<a>标签包围。这可以使用Child Combinator选择器>完成

    i {
      display:block
    }
    
    ul > li > a > i {
      background:red
    }
    
    ul > li > i {
      background:grey
    }

 <ul>
    <li>
        <i class="fab fa-reddit-alien">ss</i>
    </li>
    <li>
      <a href={contract.officialLinks.Telegram} target="_blank">
        <i class="fab fa-telegram-plane">ss</i>
      </a>
    </li>
    <li>
      <a href={contract.officialLinks.Website} target="_blank">
        <i class="fas fa-globe">ss</i>
      </a>
    </li>
  </ul>