《CSS样式表覆盖顺序》由会员分享，可在线阅读，更多相关《CSS样式表覆盖顺序（3页珍藏版）》请在金锄头文库上搜索。
1、刚才写zenktodo的时候，通过动态添加class的方式修改一个div的样式，总是 不起作用。1.2.3.4.5.6.7.8.9.10.Css代码鬻#navigator (height: 100%;width: 200;position: absolute;left: 0;border: solid 2 #EEE;.current_block ( border: solid 2 #AE0;11. 查找一些教材中（w3schools等），只说css的顺序是“元素上的style”“文件头 上的style元素” “外部样式文件”，但对于样式文件中的多个相同样式的优先级 怎样排列，没有详细说明。经过
2、测试和继续搜索，得知优先级如下排列：1. 样式表的元素选择器选择越精确，则其中的样式优先级越高: id选择器指定的样式 类选择器指定的样式 元素类型选择器指定的样式所以上例中，#navigator的样式优先级大于.current_block的优先级，即 使.current_block是最新添加的，也不起作用。2. 对于相同类型选择器指定的样式，在样式表文件中，越靠后的优先级越高注意，这里是样式表文件中越靠后的优先级越高，而不是在元素class出现的顺 序。比如.class2在样式表中出现在.classl之后：Css代码鬻1. .classl (2. color: black;3. 4.4. .
3、class2 (5. color: red;6. 而某个元素指定class时采用class=class2 class1”这种方式指定，此时虽然class1 在元素中指定时排在class2的后面，但因为在样式表文件中class1处于class2前 面，此时 仍然是class2的优先级更高，color的属性为red，而非black。3.如果要让某个样式的优先级变高，可以使用!important来指定:Css代码蓿1. .class1 2. color: black !important;3. 4.4. .class2 5. color: red;6. 此时class将使用black，而非red。对
4、于一开始遇到的问题，有两种解决方案:1. 将 border 从#navigator 中拿出来，放到一个 class .block 中，而.block 放 至 0.current_block 之前：Css代码会1. #navigator 2. height: 100%;3. width: 200;4. position: absolute;5. left: 0;6. 7.7. .block (8. border: solid 2 #EEE;9. 11.10. .current_block (11. border: solid 2 #AE0;12. 需要默认为#navigator元素指定class=block2. 使用important:Css代码蓿1. #navigator (2. height: 100%;3. width: 200;4. position: absolute;5. left: 0;6. border: solid 2#EEE;7. 8.8. .current_block (9. border: solid 2 #AE0 important;10. 此时无需作任何其他改动即可生效。可见第二种方案更简单一些。
