如何在没有链接的情况下仅为图标添加样式？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在没有链接的情况下仅为图标添加样式？相关的知识，希望对你有一定的参考价值。
我正在构建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>
答案
您可以在组合选择器中为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>另一答案
你可以，如果没有链接的<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>以上是关于如何在没有链接的情况下仅为图标添加样式？的主要内容，如果未能解决你的问题，请参考以下文章
Codility 任务 TapEquilibrium 正确性仅为 33%