是否可以阻止CSS字体样式的传播

Question

我有一个插件，它输出一个概要文件部分，我计划用一个ol>li元素包装它。我想使用不同的字体大小/样式/颜色来设置列表编号的样式。但如果我这样做，字体样式将传播/级联到配置文件中。我不想再次对配置文件中的每一条文本进行重新设计。那么，是否可以防止字体样式传播到子代元素中呢？

<style>
#rank li{
  font-size:50px;
  font-style: italic;
  font-family: serif;
  font-weight: bold;
  width:70px;
  margin-right:10px;
  text-align:center;
}
</style>
<ol id="rank">
  <li>
    <div class="profile">
      <!-- contains complex stuffs including tables, floated div for displaying profiles-->
    </div>
  </li>
</ol>

编辑：对不起，我过分夸大了"重新设计每一条文本"。我认为，如果我需要再次使配置文件样式不受影响，我需要知道ul之外的默认字体样式，并将其应用于div中。这不需要太多工作，但在未来，需要修改两个位置以保持整体样式一致。

Answer 1

抱歉，没有。所有字体属性级联（CSS中的"C"）到所有子元素中，没有办法阻止它。如果你不想要相同的字体，你必须重置子元素上的属性。

你可以做的一件事可能不是真正改变<li>上的字体，而是在附近的容器上。这只适用于较新的浏览器，如果它对你有效的话，很棒：）：

ol {
  list-style-type : none;
}
ol > li:before {
  content           : counter(list_counter) " ";
  counter-increment : list_counter;
  float             : left;
  font-family       : verdana;
}
ol:first-child {
  counter-reset: list_counter;
}

Answer 2

您可以"重置"所有子元素的字体样式。它实际上并没有重置，但它应该与通用选择器一起工作。但要小心，因为这实际上会在所有子元素上强制使用字体，所以如果您的选择器比其他选择器更具体，它最终可能仍然会影响其他元素。

以这个小提琴为例：http://jsfiddle.net/79ZK5/1/

Answer 3

据我所知，这与您可以用来覆盖样式的选择器优先级有关。看看这里，了解一下风格的优先级。如果您在html中指定了将获得最高优先级的样式。