CSS样式覆盖规则

最新推荐文章于 2022-08-26 13:48:00 发布

weixin_33940102

最新推荐文章于 2022-08-26 13:48:00 发布

阅读量98

点赞数

原文链接：http://www.cnblogs.com/wujixing/p/5810414.html

版权

有一下问题，想让下面的border生效，#比. 优先级高，

    #navigator {  
        height: 100%;  
        width: 200;  
        position: absolute;  
        left: 0;  
        border: solid 2 #EEE;  
    }  
      
    .current_block {  
        border: solid 2 #AE0;  
    }

有2种方法

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  
  
.block {  
    border: solid 2 #EEE;  
}  
  
.current_block {  
    border: solid 2 #AE0;  
}

    #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>

转载于:https://www.cnblogs.com/wujixing/p/5810414.html

weixin_33940102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式覆盖规则

有一下问题，想让下面的border生效，#比. 优先级高， #navigator { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } ...
复制链接

扫一扫