css样式优先级总结
样式的优先级
当一个元素被多重样式作用时，如被外部样式、内部样式和内联样式同时作用于同一个元素，一般情况下，
优先级是这样的：外部样式 < 内部样式 < 内联样式
当然也有一个例外就是当外部样式放在内部样式的后面的时候，则外部样式将覆盖内部样式。
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 标签式的导航菜单title>
<style type="text/css">
/* 内部样式*/
h1{color:blue;}
style>
<link rel="stylesheet" href="css/1.css">
head>
<body>
<h1>显示的颜色将是外部样式设置的红色！h1>
body>
html>选择器的优先权
1、内部样式表的权值最高 1000；
2、ID 选择器的权值为 100；
3、Class 类选择器的权值为 10；
4 HTML 标签选择器的权值为 1；
也就是你在用选择器选中设置元素样式的时候，实现机制如下；
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabtitle>
<style>
#tab{/* 权值为：100*/
width:99%;
margin: auto;
}
ul{width:100%;margin:20px auto;padding: 0;text-align: center;}/* 权值为：1*/
li{/* 权值为：1*/
width: 19%;
list-style: none;
line-height: 2.5em;
display: inline-table;
background-color: #e4b9c0;
cursor: default;
}
li:hover{background-color: #c7254e;}
.content{/* 权值为：10 */
width:96%;
margin: auto;
background-color: aquamarine;
text-align: center;
height: 200px;
}
.content div{/* 权值为：100+1=101 */
display: none;
}
.content .show{/* 权值为：100+100=200 */
width: 100%;
display: block;
background-color: #adadad;
}
style>
head>
<body>
<div id="tab">
<ul>
<li>团队介绍li>
<li>团队成就li>
<li>团队生活li>
<li>团队成员li>
<li>团队引力li>
ul>
<div class="content">
<div class="each show">简介div>
<div class="each">时间线 荣誉展示div>
<div class="each">平时生活照片div>
<div class="each">地图div>
<div class="each">优点 条件div>
div>
div>
<script>
var oul=document.getElementById("tab");
var oli=oul.getElementsByTagName("li");
var odiv=oul.getElementsByTagName("div")[0].getElementsByTagName("div");
var len=oli.length;
function show(index) {
for(var i=0; iif (i===index){
odiv[i].className="show";
}
else{odiv[i].className=""}
}
}
for(var i=0;ifunction () {
show(this.index);
};
}
script>
body>
html> 在遇见一个以上的选择器是要把每种类型选择器的权值相加，最后的结果就是最后的权值，也就是说当你选择器选的越多。你的权值就会越大，但是我们不建议选择器大于三个（因为浏览器的解读选择器时是从右向左，选择器多会加大浏览器渲染时间）。
上面的代码是我在写tab时遇到一个小问题，就是当我把上面的代码改一下，功能就不能实现（上面的代码是能实现功能的）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabtitle>
<style>
#tab{/* 权值为：100*/
width:99%;
margin: auto;
}
ul{width:100%;margin:20px auto;padding: 0;text-align: center;}/* 权值为：1*/
li{/* 权值为：1*/
width: 19%;
list-style: none;
line-height: 2.5em;
display: inline-table;
background-color: #e4b9c0;
cursor: default;
}
li:hover{background-color: #c7254e;}
.content{/* 权值为：10 */
width:96%;
margin: auto;
background-color: aquamarine;
text-align: center;
height: 200px;
}
.content div {/*权值为：100+1=101 */
display: none;
}
/*.content*/ .show{/* 权值为：100 */
width: 100%;
display: block;
background-color: #adadad;
}
style>
head>
<body>
<div id="tab">
<ul>
<li>团队介绍li>
<li>团队成就li>
<li>团队生活li>
<li>团队成员li>
<li>团队引力li>
ul>
<div class="content">
<div class="each show">简介div>
<div class="each">时间线 荣誉展示div>
<div class="each">平时生活照片div>
<div class="each">地图div>
<div class="each">优点 条件div>
div>
div>
<script>
var oul=document.getElementById("tab");
var oli=oul.getElementsByTagName("li");
var odiv=oul.getElementsByTagName("div")[0].getElementsByTagName("div");
var len=oli.length;
function show(index) {
for(var i=0; iif (i===index){
odiv[i].className="show";
}
else{odiv[i].className=""} //不加 "each"
}
}
for(var i=0;ifunction () {
show(this.index);
};
}
script>
body>
html> 我发现每个每个该显示的div没有显示，就是在我点击动作点击了后，相对应的没有显示，但是这并不是我想要的结果，经过查证，错误就是这里我们讲的优先级，大家注意没有 我把样式表里的
.content .show 改成了.show 这样权值也就变了 由之前的 200 变成了这里的 100
.content div {/*权值为：100+1=101 */
display: none;
}
/*.content*/ .show{/* 权值为：100 */
width: 100%;
display: block;
background-color: #adadad;
}权值是 .content div 大于 .show，所以浏览器渲染代码最后显示的是优先级高的样式。则始终是 display: none;即使点击把有的元素样式选择器设置成了.show。按着权值还是 display: none; 不管你在什么地方设置，原理是不变的。所以我上面那个代码就是对的，.content .show的权值是200比 .content div的101大，所以当在点击事件发生设置成为 .show时。整个功能是对的。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；
IE又是很特殊的一个详细内容参考：
CSS 的优先级机制[总结]
IE中奇怪的应用CSS的BUG