`

如何定义css优先级顺序

    博客分类：
  • css
 
阅读更多

1.层叠选择器的优先级:

浏览器缺省 <外部样式表 < 内部样式表 <内联样式

其中,样式表优先级:

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

生选择器以前叫上下文选择器，所以完整的层叠优先级是:

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级.

为了说明该问题，请参见下面的例子说明。

  1. <html>  
  2. <head>  
  3.     <title></title>  
  4.     <style type="text/css">  
  5.         div { color: #00FF00 } /* 绿色 */  
  6.         .a1 { color: #0000FF } /* 蓝色 */  
  7.         .a1 div { color: #00FFFF } /* 青色 */  
  8.         .a2 { color: #FF0000 } /* 红色 */  
  9.         #a2 { color: #FFFF00 } /* 黄色 */  
  10.         #a2 div { color: #FF00FF } /* 紫色 */  
  11.     </style>  
  12. </head>  
  13. <body>  
  14.   <div>我是绿色，内部样式表优先于浏览器缺省</div>  
  15.   <div class="a2">我是红色，类选择器优先于内部样式表</div>  
  16.   <div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>  
  17.   <div class="a1">  
  18.       <span>我是蓝色，类选择器优先于内部样式表</span>  
  19.       <div>我是青色，类派生选择器优先于类选择器</div>  
  20.       <div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>  
  21.       <div id="a2">  
  22.           <span>我是黄色，ID选择器优先于类派生选择器</span>  
  23.           <div>我是紫色，ID派生选择器优先于类派生选择器</div>  
  24.           <div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>  
  25.           <div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>  
  26.           <div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>  
  27.       </div>  
  28.   </div>  
  29. </body>  
  30. </html> 
分享到：
| 为什么要用 Bootstrap
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS样式定义的优先级顺序介绍

    CSS样式定义的优先级顺序确实是一个值得关注的问题，下为大家详细介绍下，希望对大家有所帮助

    CSS中选择器优先级顺序实战讲解.pdf

    CSS中选择器优先级顺序实战讲解.pdf

    网页css优先级为您详细解读

    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，CSS是层叠样式表（Cascading Style Sheets）的简称，我们能通过CSS为文档设置丰富且易于修改的外观

    浏览器如何判断css优先级

    优先级顺序下列是一份优先级逐级增加的选择器列表: 通用选择器*元素(类型)选择器类选择器属性选择器伪类ID 选择器内联样式事实上，元素还可以从父元素上继承一些样式，如color等属性。这些继承的样式的优先级永远

    element.style覆盖样式因优先级顺序导致的解决方法

    system.css中定义的样式或者是js所致，根本原因在于CSS的优先级顺序导致你所定义的样式被覆盖掉，其实解决方法很简单在你被覆盖掉的样式后面面加上！important便可轻松解决

    详解CSS中的选择器优先级顺序

    CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下

    CSS 优先级问题详解

    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是重点。

    举例详解CSS中的的优先级

    注意：元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的选择器列表：  通用选择器（*） 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 基于类型的优先级 优先级是根据...

    CSS优先级的相关知识详细介绍

    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点

    css样式加载顺序及覆盖顺序深入理解

    查找一些教材中（w3schools等），只说css的顺序是“元素上的style” &gt; “文件头上的style元素” &gt;“外部样式文件”，但对于样式文件中的多个相同样式的优先级怎样排列，没有详细说明。经过测试和继续搜索，得知...

    同级情况下CSS的优先级探讨

    如果在网页的HEAD标记中同时使用了STYLE标记符（指定嵌入式样式）和LINK标记符（指定链接式样式），并且这两个样式指定中同时应用了具有同一优先级别的...，则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级...

    css样式优先级及层叠的顺序排序探讨

    css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢，这个问题貌似一直存在我们身边却一直无从选择，接下来用实例为大家说明下，到底哪个高点，感兴趣的你可不要错过了哈

    CSS z-index 层级关系优先级的概念

    CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也...

    Java面试宝典2017版

    2、CSS 样式定义优先级顺序是? 3、div 和span的区别? ........... 4、CSS选择器包括? 11 5、用Css3语法中，如何实现一个矩形框的圆角效果和50%红色透明效果?，请写出关键脚本. ...............................

    CSS的执行顺序和优先级问题示例探讨

    顺序和优先级，在确定优先级的时候，我们就执行优先级高的，而忽略优先级低的；CSS自有一套特殊性判定方式，特殊性越高的则优先级越高，下面简单为大家介绍下

    CSS样式书写顺序和命名规范及注意事项

    ③:布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。 ④:绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕...

    权重和层叠规则决定了CSS样式优先级

    基本的规则为同一级别的个数，数量多的优先级高，影响CSS样式权重的两个因素即顺序、数量，下面由几个示例，大家可以感受下

Magicbox
Global site tag (gtag.js) - Google Analytics