CSS作用域问题
今天去长虹面试,面试官问了一个问题,就是给一个div在三个地方设置不同的background,最后div显示的颜色是哪一个?
当时我第一次回答的是最后一个,但是后来又改口说是第一个,回来一验证,证明自己错了,今天就总结一下CSS样式的作用域问题吧。
样式优先级(内联样式的优先级最高)
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于head 标签内部)
4. 内联样式(在 HTML 元素内部)
外部样式表>浏览器缺省设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> </head> <body> <div>浏览器缺省样式</div> <div class="outStyle">外部样式</div> </body> </html>
// cssTest.css .outStyle{ width: 300px; height: 200px; background: gray; }
结果:浏览器默认背景为白色,外部样式将背景调整为灰色
内部样式表和外部样式表取决于引用位置,谁在后就以谁为准
内部样式在前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <style type="text/css"> .outStyle{ width: 300px; height: 200px; background: orange; } </style> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> </head> <body> <div class="outStyle">内部样式在前</div> </body> </html>
// cssTest.css .outStyle{ width: 300px; height: 200px; background: gray; }
结果:内部样式失效,背景为灰色
外部样式在前
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> <style type="text/css"> .outStyle{ width: 300px; height: 200px; background: orange; } </style> </head> <body> <div class="outStyle">外部样式在前</div> </body> </html>
结果:外部样式失效,背景为橙色
内联样式优先级最高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> <style type="text/css"> .outStyle{ width: 300px; height: 200px; background: orange; } </style> </head> <body> <div class="outStyle">其他样式</div> <div style="width: 300px;height: 200px;background: red;" class="outStyle">内联样式</div> </body> </html>
// cssTest.css .outStyle{ width: 300px; height: 200px; background: gray; }
结果:外部样式和内部样式都失效,背景为红色
当存在多重引用时,根据权重决定优先权
1. 内联样式表的权值最高 1000
2. id 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
使用!important可以修改优先级,且优先级最高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <style type="text/css"> div{ width: 300px; height: 200px; background: orange !important; } </style> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> </head> <body> <div id="id" class="outStyle"></div> </body> </html>
// cssTest.css .outStyle{ width: 300px; height: 200px; background: gray; } #id{ width: 300px; height: 200px; background: red; }
结果:div显示为橙色,此时虽然存在类选择器,id选择器和标签选择器,但是标签选择器中使用了!important属性,所以优先级最高
当对同一个div进行多次样式修改时,以最近一次修改为准
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cssTest</title> <link rel="stylesheet" type="text/css" href="../css/cssTest.css"> </head> <body> <div class="outStyle"></div> </body> </html>
// cssTest.css .outStyle{ background: gray; width: 300px; height: 200px; background: red; }
结果:div颜色为红色