是否可以防止CSS字体风格传播？

我有一个输出配置文件部分的插件，我打算用ol> li元素包装它。我想使用不同的字体大小/样式/颜色来设置列表编号。但是，如果我这样做，字体样式将传播/级联到配置文件中。我不想重新放置轮廓内的每个文本。那么是否有可能阻止字体风格传播到后代元素中？是否可以防止CSS字体风格传播？

<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。这不是太多工作，但将来需要修改两个地方以保持整体风格的一致性。

来源

2011-06-16 lulalala

请出示一些代码 – 2011-06-16 06:06:03

您可以“重置”所有子元素的字体样式。这不是真的重置，但它应该与universal selector。但要小心，因为这实际上会强制执行所有子元素的字体，所以如果您的选择符比其他元素更具体，最终可能会影响其他元素。

检查这个捣鼓一个例子：http://jsfiddle.net/79ZK5/1/

来源

2011-06-16 06:24:59 ChrisR

对不起，但没有。所有字体属性级联（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; 
}

来源

2011-06-16 06:09:11

我的实际问题的答案是第一款（“无解”）。我提供了一个替代方案，可以在某些浏览器中使用，并且可以在各种JS库中使用它们（特别是IE <= 8）。 – 2011-06-16 06:26:10

连第一段都是错误的答案。 OP并不是问你是否可以防止一般的级联，但它是否“可以防止字体风格传播到后代元素？”这绝对是可能的，你只需要在所有的子元素上设置字体样式（就像我，@CharithJ和@ChrisR都已经回答）。另外，关于替代方案，其主要矫正措施是使用JavaScript来实现这样一种简单的解决方案，其中单纯的附加样式将完全解决OP的问题。 – 2011-06-16 07:16:48

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

来源

2011-06-16 06:12:34 CharithJ

特异性和级联有区别，问题在于级联。 – 2011-06-16 06:15:26

是否可以防止CSS字体风格传播？

回答

相关问题