FontAwesome 不继承锚点颜色

Question

我知道 font awesome 将通常继承锚颜色。但是，我发现它会将我的链接变成蓝色。经过调查，我发现这条规则是罪魁祸首：

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

我实际上能够通过向元素添加tabindex 属性来解决问题。我的问题是，是否有非破解方法来解决这个问题？

顺便说一句，我匹配此规则的原因是因为我在 Angular 2 中使用路由属性，这会阻止它拥有 href。

Answer 1

如果您退后一步考虑级联样式表中的“级联”，您可能会忘记“我知道 font awesome 将通常继承锚颜色。但是...”和只需编写您的规则，无论 Angular 或 font-awesome。如果某些包含规则很烦人...删除它。

我不确定您使用的是哪个版本的 Angular - 或者这些天它是如何工作的......但在 5+ 版本中的一些 - 建议您将 href 保留在那里 - 但是没有价值。 <a href class='button'>... - 所以，请检查是否有可能。这里的东西可能会有所帮助：Valid to use <a> (anchor tag) without href attribute?

JSfiddle

https://jsfiddle.net/sheriffderek/kzrnq7Ly/22/

标记

<p>A <a href><span>standardd link</span></a> in a paragraph.</p>

<!-- example component that might use icons -->
<nav class="social-networks">
  <ul class="network-list">
    <li class="network name">
      <a href class="link">
        <i class="fa fa-pencil"></i>
      </a>
    </li>

    <li class="network name">
      <a href class="link">
        <i class="fa fa-trash"></i>
      </a>
    </li>

    <li class="network name">
      <a href class="link">
        <i class="fa fa-align-justify"></i>
      </a>
    </li>
  </ul>
</nav>

样式

/* general setup */
a {
  display: block;/* big touchable areas */
  text-decoration: none;
  color: inherit;
}

a:hover {
  cursor: pointer;
}

ul { /* probably already in your 'reset' */
  margin: 0;
  padding: 0;
  list-style: none;
}

p a {
  display: inline-block;
  text-decoration: underline;
  color: darkgray;
}

p a:hover {
  color: red;
}

/* 3rd party setup */
.fas {
  color: inherit;
  /* this is what you probably want */
  /* or you have some conflicting rules */
  font-size: 30px; /* a default? nope... doesn't work */
}

/* specific component */
.social-networks .network-list {
  display: flex;
  flex-direction: row;

  color: lightblue;
  transform: translate(-1rem, 0)
}

.social-networks .link {
  font-size: 30px;
  padding: 1rem; /* lots of space for fingers */
  transition: .5s;
}

.social-networks .link:hover {
  color: red;
  transition: 0s;
}

更大的问题是，单页应用内的“链接”是否应该首先是锚标记...