當你將一個樣式添加到元素上卻發現不起作用時，那就是遇到優先級問題了。那么應該如何處理 CSS 優先級問題呢，下面我總結了一些解決 CSS 優先級問題的常用法則。

樣式距離

我們可以通過使用外部樣式、內部樣式、內聯樣式等方法給元素添加指定的樣式，此時的優先級是:

外部樣式 < 內部樣式 < 內聯樣式
這個應該比較容易理解，也就是說離元素距離越近的樣式優先級越大。如：

此時顯示的優先級是 red > blue > green。所以 my color 顯示為紅色。

特殊的計算方法

假設有下面這段代碼：

我們面對下面的 css，如何判斷優先級呢？

這里介紹一種特殊的計算方法：

元素, 偽元素: 1 – (0,0,0,1)
類, 偽類, 屬性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
內聯樣式: 1 – (1,0,0,0)
這里的屬性指的是：

效果如下：

優先級從上往下依次增加，至于如何計算，同樣舉例說明：

p: 1個元素– (0,0,0,1)
div: 1個元素 – (0,0,0,1)
#idSelector: 1個ID – (0,1,0,0)
div#idSelector: 1個元素, 1個ID – (0,1,0,1)
div#idSelector p: 2個元素, 1個ID– (0,1,0,2)
div#idSelector p.classSelector: 2個元素, 1個類, 1個ID – (0,1,1,2)
所以現在我們再來看上面的例子：

由于優先級上 (0,1,0,1) > (0,0,1,2)，所以我們知道最后顯示的顏色為紅色。

繼承

繼承是個比較好理解的概念，即子元素會繼承父元素的樣式。例如：