CSS样式覆盖规则
有一下问题， 想让下面的border生效 ，#比. 优先级高，
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
有2种方法
1.
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
}
.block {
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
2.
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0 !important;
}
规则一：由于继承而发生样式冲突时，最近祖先获胜。
显示蓝色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body
{color:black;}
p
{color:blue;}
</style>
</head>
<body>
<p>welcome
to <strong>gaodayue的网络日志</strong></p>
</body>
</html>
规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜。
显示红色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body
{color:black;}
p
{color:blue;}
strong
{color:red;}
</style>
</head>
<body>
<p>welcome to
<strong>gaodayue的网络日志</strong>
</p>
</body>
</html>
规则三：直接指定的样式发生冲突时，样式权值高者获胜。
| CSS选择器 | 权值 |
|---|---|
| 标签选择器 | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
| 内联样式 | 1000 |
| 伪元素(:first-child等) | 1 |
| 伪类(:link等) | 10 |
可以看到，内联样式的权值>>ID选择器>>类选择器>>标签选择器，除此以外，后代选择器的权值为每项权值之和，比如”#nav .current a”的权值为100 + 10 + 1 = 111。
规则四：样式权值相同时，后者获胜。显示蓝色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.byline
a {color:red;}
p
.email {color:blue;}
</style>
</head>
<body>
<p class="byline">Written by
<a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a>
</p>
</body>
</html>
规则五：!important的样式属性不被覆盖。
显示红色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.byline
a {color:red !important;}
p
.email {color:blue;}
</style>
</head>
<body>
<p class="byline">Written by
<a class="email" href="mailto:jean@cosmofarmer.com">
Jean Graine de Pomme
</a>
</p>
</body>
</html>
