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

Question

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

3

我有一个插件，它输出一个个人资料部分，我计划用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中应用它们。这并不费多少功夫，但将来需要修改两个地方以保持整体风格一致。

- lulalala

3个回答

2

您可以“重置”所有子元素的字体样式。实际上并不是真正的重置，但它应该可以与通用选择器一起使用。但要小心，因为这将实际上强制应用字体到所有子元素，所以如果您的选择器比其他选择器更具体，则最终仍可能影响其他元素。

请查看此示例：http://jsfiddle.net/79ZK5/1/

- ChrisR

1

据我理解，这与选择器优先级有关，您可以使用它来覆盖样式。请在此处查看样式的优先级以了解更多信息。如果您在HTML中指定样式，则该样式将具有最高优先级。

- CharithJ

有一个区别是特定性和级联，这个问题涉及到级联。 - user578895

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user578895 · Accepted Answer

抱歉，无法做到。所有字体属性都会层叠（CSS中的“C”）到所有子元素上，没有办法阻止它。如果您不想使用相同的字体，就必须重置子元素上的属性。

您可以尝试的一件事是，实际上不要在

上更改字体，而是在其附近的容器上更改。这只适用于较新的浏览器，如果对您有用，那很好 :) :

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;
}