Question

是我为客户制作的网站的开始 http://www.designobvio.us/smartklubben/

这是问题所在。我刚刚开始这个项目，现在又回来了，我似乎无法改变字体样式.. 除非我使用内联样式。

我使用了html5boilerplate。有没有人知道什么是限制我的字体样式可以在内联样式之外设置样式？

例如，#footer p{color:#fff;}不会改变

Answer 1

您可能遇到CSS规则的特异性问题。

假设您有2条CSS规则，如下所示：

.use-font { font-size: 24px; }
#content { font-size: 48px; }

<html><body>
  <div id="content">
    <p class="use-font">Hello!</p>
  </div>
</body></html>

您希望段落使用24px的字体大小，但它将使用48px。

这是因为用于定义规则的选择器具有优先级。像.use-font这样的类计为10，像h2这样的HTML实体将计为1，而#content之类的ID计为100.因为.use-font等于10且#content等于100，则48px规则优先。解决方案是使规则显示为

#content .use-font { ... }

这使得它值得110分，从而超越了其他定义的规则。

更多例子：

body { .. } = 1 points
#content ul.product-listing li a { ... } = 113 points
div.field-header label = 12 points

编辑：纠正了我的错误，标签选择器值1分，而班级值10，而不是相反。请参阅http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

上的更多示例

Answer 2

我不赞成过度使用它，但您可以尝试使用!important，因为它通常表明不良的CSS设计。

.myOtherClass{
     font-size: 36px !important;
}

编辑:(根据你的评论）

.myH1class{
    font-size: 20px; //this will be used, as class-styles have precedence over tag-styles (below)
}

h1{
    font-size: 11px;
}

解决方案：要么编写更具体的类定义，要么使用!important

Answer 3

当您从标题中取出字体样式时会发生什么？您的字体更改是否有效？

Answer 4

您是否正在编辑正确的css文件？我建议在浏览器中加载网站并检查浏览器中加载的CSS文件源代码，看看是否存在最新的更改。

Answer 5

根据您对问题的评论：#footer p{color:#fff;}不会改变

您是否尝试过：#footer p a {color:#fff;}？

Answer 6

页脚段落中的文字对我来说是白色的。也许清除你的缓存？页脚中的链接看起来很奇怪，这些链接由您的a和a:visited规则定义，而不是您的#footer p。尝试...

#footer p a,#footer p a:visited {
color: #fff;
}

无法更改CSS字体类

6 个答案: