天天看点

补充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权重与手风琴效果