WordPress CSS設定跑掉?

WordPress CSS設定跑掉 ?本文將針對在wordpress 貼入自己所寫程式之 CSS設定跑掉做探討，分享個人解決辦法。

筆者在VS code中寫好工具程式，並在wordpress中貼入自己寫的工具程式後，常常會發現

，工具程式之版面設定會與原來在VS code測試所呈現的結果不同，後來筆者找到造成所寫程式的版面設定跑掉原因為何?

原因:

自己寫的程式因為貼入wordpress中，因此wordpress主題也會針對貼入的內容做格式的設定，以符合主題之一致性，但就是因為這些設定導致原本的工具CSS設定被主題的CSS設定給覆蓋掉。

解決辦法:

在CSS設定後面加入 !important就能夠強制將該頁面的CSS設定變成示自己的程式設定，如下所示

圖1.沒加!important程式碼之結果

從圖1中可以看到各個文字均依照設定顯現不同顏色。

圖2.加入!important程式碼之結果

從圖2中可以看到原本透過class選擇器以及id選擇器所指定的顏色，全部都強制變成標籤選擇器的顏色，因此就可以透過這個方法將主題之設定變成自己的設定。

後記:

筆者會發現這個方法是因為，在找尋原因時透過觀看個人網站的原始碼，發現style標籤中都有在CSS中出現!important這段程式碼，筆者覺得好奇才意外發現，解決方法。

[參考]

1.https://www.w3schools.com/css/css_important.asp

2.https://www.casper.tw/css/2016/12/29/one-class/