有一下问题, 想让下面的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>