2

我试图将#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;
}
4

5 回答 5

7

首先，它只有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 无关

只是一个很好的阅读在这里..与这个答案有关......

于 2013-08-14T20:30:25.693 回答
2

细说外星人的回答，最好用选择器#commentslink a。CSS 规则按特定顺序应用，a元素的样式比其父元素 ( #commentslink) 的样式更特定。选择器#commentslink a比其他选择器更具体，因此将优先。

这是一篇关于特异性的好文章。

正如其他人所说，该属性color不是font-color.

@Sobin!important应谨慎使用，因为它会破坏应用于#comments div. 最好利用特异性。

于 2013-08-14T20:39:19.050 回答
2

试试这个!important

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

并使用color:而不是font-color

于 2013-08-14T20:32:18.073 回答
0

Replace font-color with color.

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

Also 

a:link, a:visited {
    color: #0eb0d3;  // Also this a css override
    text-decoration: none;
}

Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers. 

#commentslink a {
  color: #ffffff;
}

Thanks @Mr. Alien for his fiddle and the SO link.

于 2013-08-14T20:31:19.273 回答
0

“10”将是#0eb0d3，因为 CSS 样式应用于标签。

改变

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

#commentslink { 浮动：对；字体颜色：#ffffff !important; 字体大小：19px；字体家族：“蒙特塞拉特”，无衬线；

它将覆盖其他样式

于 2013-08-14T20:33:04.627 回答