作者philxiao (Sting)
看板Blog
標題[Blogger] CSS優先順序的問題（贈P幣）
時間Sun Oct 14 01:52:08 2012
我在修改Blogger的CSS時，遇到一個「修先順序」的問題，
據我所知，CSS有重複時，最高優先到最低優先的次序是：
Inline > Embedded > Linked
但是我在Blogger範本的「編輯html」功能，修改CSS，加入Embedded CSS的時候，
卻無法附蓋Linked CSS的效果（Linked CSS來源：
http://www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css）
詳請可參考圖
http://i.imgur.com/OHE5t.png（Chrome Developer Tools）
可見到我寫的Embedded CSS被劃線，無法呈現效果（35px），而是呈現Linked CSS的15px
我有嚐試試過加入!important在Embedded CSS，的確有效果（35px）；
但是我還是
想弄清楚為什麼會造成這樣的優先次序？
如果能獲得合理的相關解答，將致贈微薄P幣作為感謝～
再次謝謝！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.24.0.132
※ 編輯: philxiao 來自: 114.24.0.132 (10/14 01:53)
1F：→ Wcw5504:順序的問題？有可能是你把內嵌CSS寫在<link 前面了 10/14 03:51
2F：→ Wcw5504:導致自訂CSS被覆蓋 不過這也只是猜測 沒有實際頁面可參照 10/14 03:52
Embedded CSS在Link CSS前面，實際檢視原始碼如下：
<head>
<title></title>
...
<link type='text/css' rel='stylesheet'
href='//www.blogger.com/static/v1/widgets/4219271310-widget_css_2_bundle.css'
/>
...
<style id='page-skin-1' type='text/css'><!--
.column-right-inner {padding: 0 35px;}
...
--></style>
</head>
※ 編輯: philxiao 來自: 114.24.0.132 (10/14 10:22)
3F：推 Wcw5504:外連的CSS中，選擇器寫得比較詳細 限定了在main-inner之下 10/14 12:40
4F：→ Wcw5504:所以順位比較高 你把自訂的CSS也指定成一樣的形式就可以了 10/14 12:41
5F：→ Wcw5504:.main-inner .column-right-inner {padding: 0 35px} 10/14 12:41
6F：→ Wcw5504:用上面這個應該就OK 10/14 12:41
7F：→ philxiao:謝謝Wcw5504 的確是這個問題，感謝你的教學，已致贈P幣！ 10/21 03:17