CSS問題 - 特異性和中斷

Question

爲什麼在following codeworld是藍色而不是紅色？

的.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：

#my_id { 
    color: red; 
} 

.my_class { 
    color: blue; 
} 

Answer 1

參見：w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

被繼承的值取爲一個元件僅當沒有其它樣式聲明已被直接施加到元件的效果。

這種風格適用於某個元素與id="my_id"：

#my_id { 
    color: red; 
} 

...並將應用（繼承），以嵌套的元件，其class="my_class"只有其color屬性是未指定的範圍內。

...不再是這樣，一旦你聲明：

.my_class { 
    color: blue; 
} 

Answer 2

它會根據特異性和位置。該類直接應用於文本，但ID更遠。

在很長一段解釋：http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 3

一個簡單想起來的方式，特異性爲了在同級別適用，樣式是否是在父更多的本地然後將其應用，無論是否祖先的風格具有更高的特異性（因爲它更遠或更少地方）。

Answer 4

好問題。發生這種情況的原因，iiuc是由於遺傳，而不是特異性。

用這種方式來看，如果跨度沒有那個類，它會繼承父元素的紅色，並且「world」會變成紅色。但請注意，這是由於繼承。

當您通過類設置覆蓋繼承值的跨度顏色時。

特定性用於確定在多個競爭規則中使用哪個規則。在你的例子中，<範圍內沒有競爭規則，因此特異性不起作用。但是，如果您將此添加到您的樣式：

#my_id span {color: orange} 

你會看到「世界」是因爲ID爲比類的更多的特異性的橙色。