css覆蓋問題

2021-09-01 10:13:59 字數 2505 閱讀 6849

家裡其實有一本css方面的書,裡面有介紹css覆蓋的問題,可是看過之後忘記了,今天在網上看到網友的一篇文章,很容易記住,但是真實性不知道怎麼樣。這裡摘錄下來。

最近在寫css的時候,由於經常使用到很長的多級選擇器,而碰到一些樣式被覆蓋或者覆蓋不了的情況是相當的鬱悶,所以專門花了一些時間對一些選擇器做了對比測試。這裡先說明一下,由於ie6不支援css2.0選擇器,所以這些測試忽略了一些2.0的選擇器和連線符,如偽類(:hover),屬性 ([type=」text」]),子選擇符(>)等,僅針對#id,.class,tag和空格連線符測試。

定義:1. css句子:乙個完整的選擇器構成乙個css句子,如.abb #cd div.class。而用逗號連線的算作多個句子的省略定義方法。

2. css單詞:css句子中任何乙個#id或.class或tag都算作乙個css單詞,雖然照以前的理解一般把tag#id.class1.class2整個看作乙個單詞,但是在本文討論範圍內,這個只能算作乙個由4個單詞組成的片語。

3. 優先順序:對於選擇到同乙個元素的兩個css句子,當他們定義該元素的同乙個屬性時,如果其中乙個寫在前而不會被寫在後面的覆蓋這個屬性,那麼就稱這個css句子的優先順序高於另乙個。而當2個css句子互相調換在**中的位置都是後面的覆蓋前面的屬性時,稱這兩個 css句子有相同的優先順序。

測試用dom:

1第一行

第二行自身

2第一行

第二行自身

3第一行

第二行自身

4第一行

第二行自身

5第一行

第二行自身

6第一行

第二行自身

7第一行

第二行自身

8第一行

第二行自身

這裡先給出8組選擇器,每組兩個,各位同學可以先想一想每組裡面哪個選擇器的優先順序高:

/*第1組*/

#test1

.test1

/*第2組*/

.body #test2

#test2

/*第3組*/

div .test3

#test3

/*第4組*/

.body #test4

body #test4

/*第5組*/

html #test5

body #test5

/*第6組*/

#body #test6

.html #test6

/*第7組*/

html #body #test7

.html .body #test7

/*第8組*/

#html.html .body #test8

.html #body.body #test8

現在公布答案:

1. 僅乙個選擇器單詞的時候#id高於.class應該不用說了;

2. div#test2比#test2多了乙個單詞,那麼多乙個單詞的優先順序高,這裡可以暫時理解成多乙個單詞就選擇的更精確;

3. 同樣多乙個單詞,但其中乙個有#id選擇,則#test3要高於div .test3;

4. .body #test4高於body #test4,暫時可理解為同樣多層級時,.class高於tag;

5. html #test5與body #test5有同樣的優先順序,先寫的會被覆蓋,這裡猜測同樣的層級數,優先順序與層級跨越的深度無關;

6. #body #test6高於.html #test6,理解為#id優於.class也與層級深度無關;

7. 最後兩個比較有難度了,但瀏覽器下的結果是html #body #test7高於.html .body #test7,怎樣理解我先不說;

8. #html.html .body #test8與.html #body.body #test8同級。

其實越到後面,應該越是能看出一種模糊的規則來。經過我反覆的分析,最終從模糊的感覺中發現了其中的奧秘,或者說是一種說得通的解釋:

把css句子的單詞組成定義為「數字」,像個十百位的數字一樣,css中不同的單詞代表不同的權重數字,分別是#id,.class,tag三個數字依次從高到低排列,組成了相當於十進位制數字的百位,十位,個位。再把每個css句子中個各種單詞的個數代入到剛剛劃分的數字裡,就可以得到乙個類似於十進位制數字的三位數,只是在css的優先順序數字裡,沒有進製的概念,無數個低位單詞也還是低於乙個高位的單詞。從而結論就是,按#id,.class,tag的數字統計了css的單詞個數並代入各個數字後,只要比較兩個css數字的大小(從高位到低位依次比較),就能得出兩個css的優先順序。

用這個規則重新比較一遍前面的例子:

1. 1,0,0>0,1,0

2. 1,1,0>1,0,0

3. 0,1,1<1,0,0

4. 1,1,0>1,0,1

5. 1,0,1=1,0,1

6. 2,0,0>1,1,0

7. 2,0,1>1,2,0

8. 2,2,0=2,2,0

用這個方法很容易就能比較出最後兩組例子的優先順序,對於前述的一些情況也可以做出合理的解釋,所以在沒有更好的css選擇器解釋方法之前,這個數字計算法是非常方便且容易理解的。

集合覆蓋問題 最大覆蓋問題 呼叫中心排班問題閒談

一 集合覆蓋問題 集合覆蓋問題 set covering problem 簡稱scp 是運籌學研究中典型的組合優化問題之一,工業領域裡的許多實際問題都可建模為集合覆蓋問題,如資源選擇問題 設施選址問題 移動基站的選址 物流中心的選址 等。scp的乙個典型應用描述如下 要在乙個城市建造若干個消防隊駐紮...

集合覆蓋問題 最大覆蓋問題 呼叫中心排班問題閒談

經典scp描述包含乙個集合u以及u內元素構成的 若干各小類集合s,目標是找到s 的乙個子集,該子集滿足所含元素包含了所有的元素且使小類集合個數最少。例如,u s 找到集合能滿足條件的可以有o 或是o 至於具體選哪種組合,還有引申的乙個問題 wsc,即weighted set cover加權集合覆蓋,...

棋牌覆蓋問題

用分治的策略可以設計棋牌覆蓋問題的乙個簡捷的解法。當 k 0 時,將2 k x2 k 棋牌分割為4個小的棋牌,特殊方法必位於4個較小的棋牌之一。內容來自演算法設計 王曉東那本書上的思想。include include include include include includeusing name...