CSS问题 - 特异性和间歇性 [英] CSS question - Specificity and interitance

问题描述

为什么在以下代码 world 是蓝色而不是红色？

.my_class 的特殊性是 0,0,1 ，0 ，但它继承了 #my_id 的颜色，其特异性更高（ 0 ，1,0,0 ）。

HTML：

 < p id ='my_id'> 
 Hello 
< span class ='my_class'> 
 world 
< / span> 
< / p> 
  

CSS：

 code> #my_id {
 color：red; 
} 
 
 .my_class {
 color：blue; 
} 
  

解决方案

http://www.w3.org/TR/CSS21/cascade.html#inheritance =nofollow> w3c：6分配属性值，级联和继承 - 6.2继承

只有当没有其他样式声明直接应用到元素时，继承的值才会对元素生效。

此样式适用于具有 id =my_id的元素：

  #my_id {
 color：red; 
} 
  

...并将套用（继承） code> class =my_class 仅当

...你声明后不再是这样：

  .my_class {
 color：blue; 
} 
  

Why in the following code world is blue rather than red ?

The specificity of .my_class is 0,0,1,0, but it inherits the color of #my_id which specificity is higher (0,1,0,0).

HTML:

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

CSS:

#my_id {
    color: red;
}

.my_class {
    color: blue;
}

解决方案

See: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

An inherited value takes effect for an element only if no other style declaration has been applied directly to the element.

This style applies to an element with id="my_id":

#my_id {
    color: red;
}

... and will apply (inherit) to an element nested within having class="my_class" only if its color property is otherwise unspecified.

...which no longer is the case once you declare:

.my_class {
    color: blue;
}

这篇关于CSS问题 - 特异性和间歇性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！