今天去长虹面试，面试官问了一个问题，就是给一个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=" 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颜色为红色