`
blanky01
  • 浏览: 7019 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

css优先级别(转)

CSS 
阅读更多
CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。

CSS优先级的计算规则如下:
* 页面中定义的样式,加1,0,0,0
* 每个ID选择符(如 #id),加0,1,0,0
* 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
* 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1
然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值,
然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。

例子:
css文件或<style>中如下定义:
1. h1 {color: red;}
/* 一个元素选择符,结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符,结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符,结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符,一个ID选择符,结果是0,1,0,1 */
元素的style属性中如下定义:
h1 {color: blue;}
/* 页面中定义,一个元素选择符,结果是1,0,0,1*/

如此以来,h1元素的颜色是蓝色。
注意:
1、!important声明的样式优先级最高,如果冲突再进行计算。
2、如果优先级相同,则选择最后出现的样式。
3、继承得到的样式的优先级最低。

分享到:
评论

相关推荐

    HTML元素的优先级别

    HTML元素的优先级别是网页构建过程中一个至关重要的概念,它涉及到元素的嵌套、层叠样式表(CSS)选择器的权重以及如何有效地控制页面显示。在这个话题中,我们将深入探讨HTML元素的嵌套规则、CSS选择器的优先级计算...

    CSS3滤镜效果动画生成器 Css Filterlab.rar

    点击不同的滤镜效果就可以添加各种参数了,效果会即时的显示在右边的界面中,参数有点类似 Photoshop 的图层效果,具有一定的优先级别,你可以拖动参数配置参数的优先级别。 代码是实时生成并且高亮的。 通过下方...

    cssHack样式解析

    在 CSS Hack 中,我们需要考虑浏览器的优先级别,例如 Firefox 。因此,我们需要按照这个顺序来写 CSS Hack,例如: `#demo {width:100px;} /*被 FIREFOX,IE6,IE7 执行.*/ * html #demo {width:120px;} /*会被 IE6 ...

    CSS事例

    9. **CSS-in-JS**:这是一种将CSS与JavaScript结合的新范式,如styled-components、JSS等库,将样式直接写在JS中,提供了组件级别的样式隔离和动态样式生成。 10. **最佳实践**:遵循一定的编码规范和最佳实践,如...

    CSS&Bootstrap;

    Bootstrap是由Twitter的Mark Otto和Jacob Thornton开发的一款免费开源的前端框架,旨在帮助开发者快速构建响应式和移动优先的Web应用程序。它基于HTML、CSS和JavaScript构建,包含了一系列预定义的组件、样式和交互...

    bootstrap.min.css

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于快速构建响应式、移动优先的网站。这个"bootstrap.min.css"文件是Bootstrap的核心CSS文件,经过压缩和优化,以提高网页加载速度和性能。 Bootstrap框架由Twitter...

    一些非常棒的CSS框架集合

    5. **Tailwind CSS**:不同于其他提供预设样式的框架,Tailwind CSS是一个实用主义的CSS框架,它提供了一系列低级别的实用程序类,允许开发者按需组合创建自定义设计。这种方法鼓励代码复用,减少冗余,提高开发效率...

    一种可视化的方式来分析选择器在CSS中的特殊性

    如果所有级别都相同,则根据样式表的顺序(最后定义的优先)决定优先级。 为了更好地理解和分析CSS选择器的特殊性,我们可以借助工具——"Specificity Visualizer"。这个工具(在`specificity-visualizer-master`...

    导航栏生成器CSS Tab Designer.zip

    通过CSS Tab Designer,即使是对CSS不熟悉的初学者也能创建出专业级别的导航栏。同时,对于经验丰富的开发者来说,它是一个高效的设计原型工具,可以快速迭代和测试不同的设计方案。因此,无论你的技能水平如何,这...

    CSS选择器的权重与优先规则1

    CSS选择器的权重和优先规则是CSS样式应用的关键所在,它们决定了哪种样式会最终应用于网页元素。当多个样式规则同时作用于一个元素时,CSS会根据这些规则的特殊性来确定优先级,使得更特定的规则能够覆盖较不具体的...

    CSS完美兼容通用方法

    - **顺序与优先级**:浏览器的优先级别为Firefox ,因此在编写Hack时需考虑书写顺序,一般为FF → IE7 → IE6。 ##### **1.3 示例** ```css #demo { width: 100px; } *html #demo { width: 120px; } /* 针对IE6 */...

    100例HTML+CSS网站模板2

    在这些模板中,你可能还会发现一些常见的CSS库和框架,如Bootstrap或Foundation,它们提供了一套完整的组件和样式,能快速搭建出专业级别的网站。此外,模板可能还应用了一些前端最佳实践,如移动优先的设计哲学、...

    最全前端面试题-2(css篇-上百篇题集整理1个月)

    【CSS选择器级别】:根据选择器类型计算权重,权重高的优先应用。 【BFC(块格式化上下文)】:BFC是CSS布局中的一种独立渲染区域,能解决margin重叠和内部元素浮动等问题。 【position属性】:`absolute`相对于...

    css 样式加载的优先级使用经验分享

    优先考虑更具体的CSS选择器(如ID和类),以及合理利用层叠规则,以确保样式按预期应用。 回到问题场景,当遇到样式在页面加载后突然失效的情况,可能的原因包括: - **动态加载的样式**:如果页面内容是异步生成...

    使用DIV+CSS做网站时CSS样式的优先级

    important` 可以改变优先级别为最高,其次是 `style` 对象,然后是 `id` &gt; `class` &gt; `tag`。在同级样式中,按照声明的顺序,后出现的样式具有高优先级。 `!important` 的使用非常简单,只需要在样式声明后添加 `!...

    CSS笔记

    - 同级别样式按出现顺序决定优先级(后定义的样式优先)。 4. **使用`!important`调整优先级**: - `!important`可以提高某个样式规则的优先级。 - 但应谨慎使用,因为它可能会破坏CSS的层级结构,导致调试困难...

    web开发-前端css编程设计.pptx-课件

    掌握css的三种引入方式以及优先级别。 掌握css的基本语法以及常用单位。 熟练使用css的选择器。 熟练掌握css属性。 了解css的编写规范。 熟练掌握基于浮动和定位的页面布局方法。 能够熟练、精确的根据原型图制作...

    css应用入门实施上述事实上述事实

    如果有相同级别的样式冲突,将根据CSS选择器的特异性来确定哪个生效。 **总结** 学习CSS的关键在于理解和掌握其语法规则以及样式的应用方法。从简单的文字样式设置到复杂的布局设计,都需要通过不断实践来深化理解...

    韩顺平 PHP课程笔记(html+css+php)

    5. **响应式设计**:利用媒体查询@media,可以为不同设备和屏幕尺寸创建适应性的布局,实现移动优先的设计理念。 【PHP篇】 PHP(Hypertext Preprocessor)是一种服务器端的脚本语言,广泛用于Web开发。韩顺平老师...

Global site tag (gtag.js) - Google Analytics