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

im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change

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

My HTML is this;

我的HTML就是这个;

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

and my CSS is this

而我的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;
}

5 个解决方案

#1

First of all its only color and not font-color: #ffffff; and secondly you should use

首先是它唯一的颜色而不是字体颜色:#ffffff;其次你应该使用

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

Demo

Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like

让我告诉你,上面的选择器将选择#commentslink作为id的元素内的所有标签,所以如果你想要嵌套内部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;
}

Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.

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

Last but not the least, this has nothing to do with CSS3

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

Just a good read here.. related to this answer...

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

#2

Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.

在阐述Alien先生的答案时,最好使用选择器#commentslink a。 CSS规则按特定顺序应用,a元素的样式比其父元素(#commentslink)的样式更具体。选择器#commentslink a比其他选择器更具体,因此优先。

Here's a good article on specificity.

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

And as others have stated, the property is color not font-color.

正如其他人所说,财产是颜色而不是字体颜色。

@Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.

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

#3

Try this with !important

尝试这个!重要

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

and use color: rather than font-color

并使用颜色:而不是字体颜色

#4

The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.

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

Change

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

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

致#commentslink {float:right; font-color:#ffffff!important; font-size:19px; font-family:'蒙特塞拉特',sans-serif;

And it will override the other styling

它将覆盖其他样式

#5

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.

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

#commentslink a {
  color: #ffffff;
}

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

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

#1