为什么我的字体颜色不会改变？CSS3

Question

我试图将#commentslink的颜色改为白色.我所有的其他字体样式(字体系列,大小)都在工作,只是颜色不会改变

我的HTML是这样的;

<div id="commentslink">
  <div class="circle">
    <p><a href="">10</a></p>
  </div>
</div>

而我的CSS就是这个

a:link, a:visited {
  color: #0eb0d3;
  text-decoration: none;
}

a:hover {
  color: #0eb0d3;
  opacity: 0.4;
  text-decoration: none;
}


#commentslink {
  float: right;
  font-color: #ffffff;
  font-size: 19px;
  font-family: 'Montserrat', sans-serif;
}

.circle {
  float: right;
  background-color: #f89b2d;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  position: relative;
  margin-top: -10px;
  margin-right: 20px;
}

Answer 1

首先它是唯一的color而不是font-color: #ffffff;第二,你应该使用

#commentslink a { /* Specific selector */
    color: #fff;
}

演示

让我告诉你,上面的选择将选择所有a内部具有元素标记#commentslink为id,所以如果你想要的目标a嵌套p你可以使用一个更具体的选择像

#commentslink .circle p a { 
   /* Selects all a element nested inside p tag further nested inside an element 
      having class .circle which is further nested inside an element having 
      #commentslink as an id
   */
   color: #fff;
}

如果你真的不需要,不要让你的选择器过于专门,否则你最终会制造越来越多的嵌套规则,从而使你的CSS膨胀,所以尽可能多地使用基本规则.

最后但并非最不重要,这与CSS3无关

这里好好阅读..与此答案有关...