Question

I want to use a different font color for a link in the body text versus in the footer area. I added this in

.footer-widgets a, a:link, a:visited {
    color: #6fabad;
 }

The body text is

a, a:link, a:visited {
   color: #6fabad;
   font-weight: 600;
   text-decoration: none;
}

The body text is still showing as the footer font color. How can I fix this?

Answer 1

如果颜色不同，您的代码将无效：

两个链接的颜色与主体样式相同。因为.footer-widgets样式将由a:link样式完成。

＆＃13;

.footer-widgets a,
a:link,
a:visited {
  color: red;
}

a,
a:link,
a:visited {
  color: #6fabad;
  font-weight: 600;
  text-decoration: none;
}

＆＃13;

<body>
  <a href="#"> hi</a>

  <div class="footer-widgets">
    <a href="#"> hi</a>
  </div>
</body>

＆＃13;

您已将CSS更改为：

这样a:link将在.footer-widgets a:link之后和a:visited之后由.footer-widgets a:visited完成，然后您的代码将100％正常工作。

＆＃13;

.footer-widgets a,
.footer-widgets a:link,
.footer-widgets a:visited {
  color: red;
}

a,
a:link,
a:visited {
  color: #6fabad;
  font-weight: 600;
  text-decoration: none;
}

＆＃13;

<body>
  <a href="#"> hi</a>

  <div class="footer-widgets">
    <a href="#"> hi</a>
  </div>
</body>

＆＃13;

我希望这会对你有所帮助。

对<a> links

1 个答案: