[Blogger] CSS優先順序的問題(贈P幣)

看板Blog (部落格)作者 (Sting)時間12年前 (2012/10/14 01:52), 編輯推噓1(106)
留言7則, 2人參與, 最新討論串1/1
我在修改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)

10/14 03:51, , 1F
順序的問題?有可能是你把內嵌CSS寫在<link 前面了
10/14 03:51, 1F

10/14 03:52, , 2F
導致自訂CSS被覆蓋 不過這也只是猜測 沒有實際頁面可參照
10/14 03:52, 2F
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)

10/14 12:40, , 3F
外連的CSS中,選擇器寫得比較詳細 限定了在main-inner之下
10/14 12:40, 3F

10/14 12:41, , 4F
所以順位比較高 你把自訂的CSS也指定成一樣的形式就可以了
10/14 12:41, 4F

10/14 12:41, , 5F
.main-inner .column-right-inner {padding: 0 35px}
10/14 12:41, 5F

10/14 12:41, , 6F
用上面這個應該就OK
10/14 12:41, 6F

10/21 03:17, , 7F
謝謝Wcw5504 的確是這個問題,感謝你的教學,已致贈P幣!
10/21 03:17, 7F
文章代碼(AID): #1GUQfBw4 (Blog)
文章代碼(AID): #1GUQfBw4 (Blog)