天天看點

補充CSS權重與手風琴效果

CSS權重指的是樣式的優先級,有兩條或多條樣式作用于一個元素,權重高的那條樣式對元素起作用,權重相同的,後寫的樣式會覆寫前面寫的樣式。

權重等級:

可以把樣式的應用方式分為幾個等級,按照等級來計算權重

1、!important,加在樣式屬性值後,權重值為 10000

2、内聯樣式,如:style=””,權重值為1000

3、ID選擇器,如:#content,權重值為100

4、類,僞類和屬性選擇器,如: content、:hover 權重值為10

5、标簽選擇器和僞元素選擇器,如:div、p、:before 權重值為1

6、通用選擇器(*)、子選擇器(>)、相鄰選擇器(+)、同胞選擇器(~)、權重值為0

二、

補充CSS權重與手風琴效果

1、首先先在DW的body中建立個div盒子,在盒子内部建立多個a标簽,每個a标簽内都含有em标簽,a标簽内容可以自定義,再給div盒子一個class類然後在建立一個css,通過link标簽聯系到建立css,結果如圖所示

補充CSS權重與手風琴效果

2、通過.fontr:a:nth-of-type(n)給每一個a标簽設定transiton-delay:不同的運動時間,進而達到如圖所示的效果

補充CSS權重與手風琴效果

3、給盒子添加一個postion:fixed;固定定位,然後把right:給予負值,為接下來的動畫中做一個動态的效果

補充CSS權重與手風琴效果