当前位置:天才代写 > tutorial > 网页教程 > 详解CSS样式覆盖规则

详解CSS样式覆盖规则

2018-05-17 08:00 星期四 所属: 网页教程 浏览:494

        如果有人问你,css是什么?你可能很快就能说出答案——“层叠样式表”。不错CSS的全称叫做“层叠样式表”,那么,你知道为什么叫做层叠呢?其实,“层叠”指的就是样式的覆盖。当一个元素被运用上多种样式,并且出现重名的样式属性时,浏览器必须从中选择一个属性值。但对于初学者而言,常常会搞不清楚浏览器到底会选择哪个值,即谁覆盖了谁。下面为大家详细解读,有此需求的朋友可以参考下,希望对大家有所帮助。

详解CSS样式覆盖规则_CSS_样式覆盖_CSS基础_课课家

  如果你还没弄懂什么是样式覆盖的话,我们不妨先看一个代码片段:

  p{color:red;background:yellow}

  p{color:green}

  以上的段落最终将呈现绿色的字体,并带有黄色的背景,这是因为最后定义的color:green将之前定义的red覆盖掉了,至于黄色背景为何没有消失,那是因为第二个p的定义中并没有与之冲突的定义,因此它还是有效的。 

  这样一说,你对样式覆盖有一个初步印象了吧!

  弄清楚了什么是样式覆盖之后,接下来我们就要了解样式到底是谁覆盖谁了,即样式的覆盖规则。由于多情况都会导致一个元素被运用上多种样式,因此样式覆盖的规则也需要根据不同的情况来定,具体规则如下。

  规则一:由于继承而发生样式冲突时,最近祖先获胜

  CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:

  <html>  

  <head>  

  <title>rule 1</title>  

  <style>  

  body {color:black;}  

  p {color:blue;}  

  </style>  

  </head>  

  <body>  

  <p>welcome to <strong>gaodayue的网络日志</strong></p>  

  </body>  

  </html>  

  strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。

  规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜

  在上面的例子中,假如还指定了strong元素的样式,如:

  strong {color:red;}   

  那么根据规则二,strong中的文字最终显示为红色。

  规则三:直接指定的样式发生冲突时,样式权值高者获胜

  样式的权值取决于样式的选择器,权值定义如下:

  标签选择器1 

  类选择器10 

  ID选择器100 

  内联样式1000 

  伪元素(:first-child等)1 

  伪类(:link等)10

  可以看到,内联样式的权值>ID选择器>类选择器>标签选择器。

  除此以外,后代选择器的权值为每项权值之和,比如”#nav.currenta”的权值为100+10+1=111。

  规则四:样式权值相同时,后者获胜

  考虑下面这种情况

  <p  

  class=”byline”>Written  

   by <a  

  class=”email”  

  href=”mailto:jean@cosmofarmer.  

   com”>Jean  

  Graine de Pomme</a></p>   

  .byline  

  a {color:red;}p  

   .email {color:blue;}   

  “.bylinea”与”p.email”都直接指定了上面的a元素,且权值都为11,根据规则四,最终显示蓝色。

  由于样式表可以是外部的,也可以是内部的,规则四提醒我们要注意外部样式表引入的顺序(及<link>元素的顺序),以及外部样式表与内部样式表的出现位置。一般来说,内部样式表出现在所有外部样式表的引入之后,一般是在</head>之前。

  规则五:!important的样式属性不被覆盖

  如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important。但我们课课家网站并不推崇这种做法。以规则四的例子为例,”.bylinea{color:red!important;}”可以强行使链接显示红色。但大多数情况下都可以通过其他方式来控制样式的覆盖。所以不是万不得已的时候,不要滥用!important。

  以上这篇详解CSS样式覆盖规则就是课课家网站分享给大家的全部内容了。通过本文的学习,现在你对样式到底是谁覆盖了谁,应该心中有数了吧!

 

    关键字:

天才代写-代写联系方式