Question

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

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

我实际上可以通过向元素添加tabindex属性来解决问题。我的问题是，是否有一种非黑客方法可以解决这个问题？

BTW，我匹配此规则的原因是因为我在Angular 2中使用了路由属性，这使得它无法使用href。

Answer 1

如果你后退一步，想一想＆＃39; cascade＆＃39;在层叠样式表中，你可以忘记＆＃34; 我知道字体真棒通常会继承锚颜色。然而... ＆＃34;并且只要编写你的规则，无论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;
}

更大的问题是，如果一个单页面应用＆＃34;链接＆＃34;首先应该是一个锚标签......

FontAwesome不继承锚颜色

1 个答案:

的jsfiddle

标记

样式