通用选择器如何在这里工作？ [英] How is the universal selector working here?

问题描述

  * {font-weight：normal; } 
 #stockTicker {font：12px Verdana; } 
 .corpName {font-weight：bold; } 
 .stockUp {color：red; } 
 
< div id =section> 
 NYS：< span class =corpName>< span class =stockUp> GE< / span>< / span> +1.0 ... 
< / div> 
 

为什么通用选择器在这里的最后一句话.corpName后来在样式中，特异性？

JSFiddle这里： http：// jsfiddle。 net / zackgao / 2q9Wh /

解决方案

CSS指定属性的指定值来自级联，继承，或该属性的初始值（按照优先顺序）（ CSS规格）。

由于 * 应用于< span class =stockUp> 在中 < span class =corpName> 元素将按照您期望的样式设置，因为 corpName $ c> * 。

* { font-weight: normal; }
#stockTicker { font: 12px Verdana; }
.corpName { font-weight: bold; }
.stockUp { color: red; }

<div id="section">
   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>

Why does universal selector get the last say here when .corpName comes later in the styles and also has higher specificity?

JSFiddle here: http://jsfiddle.net/zackgao/2q9Wh/

解决方案

CSS specifies that the assigned value of a property comes from the cascade, inherited, or the property's initial value, in that priority order (CSS spec).

Since * is applied to the <span class="stockUp"> during the cascade the inherited value isn't considered.

Text directly inside the <span class="corpName"> element would be styled as you'd expect since the corpName class would beat out the * during the cascade.

这篇关于通用选择器如何在这里工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！