Question

我有一个输出配置文件部分的插件，我打算用ol＆gt; 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

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

请查看此小提琴，获取示例：http://jsfiddle.net/79ZK5/1/

Answer 3

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

是否可以防止CSS字体样式传播？

3 个答案: