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;
}

Demo

让我告诉您，上面的选择器会选择a作为#commentslink的元素内的所有id标记，以便在a内嵌p { {1}}您可以使用更具体的选择器，例如

#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

无关

与这个答案相关的好读here ..

Answer 2

在Mr. Alien's answer上阐述，最好使用选择器#commentslink a。 CSS规则按特定顺序应用，a元素的样式比其父元素（#commentslink）的样式更具体。选择器#commentslink a比其他选项更具体，因此优先。

这是一个很好的article on specificity。

正如其他人所说，该属性为color而非font-color。

@Sobin，!important应该谨慎使用，因为它会破坏应用于#comments div中元素的其他规则。更好地利用特异性。

Answer 3

使用!important

尝试此操作

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

并使用color:而不是font-color

Answer 4

将font-color替换为 color 。

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

另外

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

更新：我刚才意识到上面的内容不起作用。我认为 父母的css会覆盖孩子 。但这里错了，因为a标签具有浏览器呈现的默认颜色。

#commentslink a {
  color: #ffffff;
}

谢谢@Mr。外星人为他的小提琴和SO链接。

Answer 5

由于应用于标签的CSS样式，“10”将成为＃0eb0d3。

更改

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

要 #commentslink { 漂浮：对; font-color：#ffffff！important; font-size：19px; font-family：'Montserrat'，sans-serif;

它将覆盖其他样式

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

5 个答案: