跳到主要內容

發表文章

目前顯示的是 十一月, 2013的文章

CSS 樣式覆蓋規則

參考連結(2018更新):CSS Specificity

在複雜的頁面裡,HTML元素套用到互相衝突的CSS指定的情形並不少見
本篇文章會說明元素的CSS指定來源以及設定的優先順序
寫出正確、有效率的CSS對於網頁表現絕對有很大的幫助

CSS套用規則有以下重點:

1.CSS樣式的繼承 部分CSS指定會讓子代元素繼承相同指定,例如 font-size、font-family等
當祖先之間的指定並不相同時,會以較接近的祖先的樣式為準

實務上常見指定font CSS給body,讓整個頁面都以相同的字體大小、風格呈現
不過當某個區塊被指定了不同的font CSS,其子代元素呈現的CSS就會是該區塊的CSS指定

2.直接指定給元素的CSS樣式 直接指定的CSS套用優先度高於繼承的
其實跟上一點有關,離自己越近的規則的優先度越高,當然指定給自己的就是最優先囉

3.直接指定的樣式發生衝突時,以指定方式的加權值高者優先
CSS selectors                  權值

Type selectors                     1

Class selectors                   10

ID selectors                     100

Descendant selectors
Adjacent sibling selectors
Child selectors 等          1000

Pseudo element                   1

Pseudo classes                  10

CSS 基礎與選擇器使用一文中,有提到越多層次的選擇器指定會降低效率
不過當頁面複雜度高時,有時候也只能多套用選擇器來提升指定加權值

4.當CSS樣式加權值相同時,後指定者優先套用

Ajax跨網域議題 - 透過POST方法送出資料

對於跨網域議題有所不懂或是想知道如何用GET方式處理,可以參考Ajax跨網域議題 - 使用JSONP取得資料
當我們在運用各種服務提供的RESTFUL API 時,資料傳遞的方式就相當重要
JSONP的處理只能透過GET的方式傳遞
扣除在Cross Domain所不允許的DELETE、AUTH兩種傳遞方式外
實際上我們還是可以用寄送表單的方式送出POST請求,只要透過一點想法的變換就可以
GitHub檔案目錄

Tree Structure 實作

雖然說Tree也還算是常用到的結構
不過大概是因為它的設計彈性太高,大部分的程式語言似乎都沒有高完成度的容器實作
有時候要依自己需求調整還是只能自己刻一個
這個範例用JavaScript刻一個自用版,應該還有地方可以改進就是...
當然如果不考慮就瀏覽器的相容性,也許用 document.implementation.createDocument 可以少一些工
另外JSON等結構也可以模仿一部份的操作
總而言之就是如果不是真的確定非這個結構不行,是不必要自己刻輪子來用
Java等程式語言用的版本也可以參考這個的概念來改
GitHub檔案目錄