CSS文本颜色[关闭]答案

【问题标题】：CSS Text Colour [closed]CSS文本颜色[关闭]
【发布时间】：2016-11-11 16:04:32
【问题描述】：

我有一些要旋转和淡入的文本。我的问题是文本没有颜色，我想把它变成蓝色。

如您所见，我确实为rubber 类分配了一个color 属性，但它似乎没有生效。

请任何人都可以建议我如何更改我的 css 来实现这一目标？谢谢

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
// fade-in
 .fade-in p {
  margin-top: 25px;
  text-align: center;
  animation: fadein 8s;
  -moz-animation: fadein 8s;
  /* Firefox */
  -webkit-animation: fadein 8s;
  /* Safari and Chrome */
  -o-animation: fadein 8s;
  /* Opera */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}

<div class="rubber fade-in">
  <p>Job Offered</p>
</div>

【问题讨论】：

剩下的命令能用吗？
您的代码运行良好：jsfiddle.net/ntp7pdwc
@pokeyOne，谢谢，是的，其余命令都有效。
@Justinas，谢谢，我看到它在 jsfiddle 中确实有效。也许在此之上的其他一些因素会影响它。感谢您的帮助。
在此处查看我的答案中的步骤以轻松调试此类问题：stackoverflow.com/questions/40462112/…

标签： css

【解决方案1】：

请将 // fade-in 替换为 /* fade-in */ 。在 CSS 中要添加注释行，您应该使用 /* comment here */

这是工作代码

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
/* fade in */
.fade-in  p{
    margin-top: 25px;
    text-align: center;
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}

&lt;div class="rubber fade-in"&gt;&lt;p&gt;Job Offered&lt;/p&gt;&lt;/div&gt;

【讨论】：

谢谢。我认为我的问题在于 DOM 中的其他一些元素会影响它。不过，我已经成功尝试过这个：color: blue !important;
抱歉，我需要重新加载。 !important 确实有效。

【解决方案2】：

我在 jsfiddle 以及普通的 HTML 页面中尝试了您的代码。唯一的问题是 css 样式标签中的注释使用这种格式

/ Shift+8 评论 Shift+8/

【讨论】：

请校对您的帖子。
请更新您的答案。 CSS 注释的语法不是 /comment/ 正确的方法是 /*comment*/