`
desert3
  • 浏览: 2160482 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Css样式覆盖顺序

    博客分类:
  • Html
 
阅读更多
  • 1,css样式选择器的优先级为“元素上的style” > “id选择器” > “class类及伪类选择器” > “元素类型及伪类选择器”。参考:CSS2 cascade - 6.4.3 Calculating a selector's specificity
  • 2,css样式选择器的优先级相同时,根据样式被加载的顺序渲染,后面定义的样式生效。和元素class出现的顺序无关,如class="class2 class1”, 在class2、lass1的样式选择器优先级相同的情况下,并不是class1覆盖class2,而是依赖于class2,、class1所在样式文件被link进来的顺序。
  • 3,要让某个样式的优先级变高,可以使用!important来指定。参考:CSS2 cascade - 6.4.2 !important rules
  • 4,css属性的继承

参考:
css样式表中的样式覆盖顺序
查看Firebug中的Style标签中各css属性的覆盖,可以校验上述的结论
分享到:
评论

相关推荐

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

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

    CSS样式表.doc

    **CSS样式表详解** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是增强对网页内容的控制,使得内容和表现分离,提高了网页设计的...

    使用CSS样式.PPT

    如果选择器的优先级相同,则后定义的样式会覆盖前面的样式,这就是CSS的层叠特性。 CSS盒模型CSS盒模型是理解网页元素布局的关键。每个HTML元素都可以看作是一个矩形框,包括内容区域(content)、内边距(padding...

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

    css样式表手册,包含几百种css样式

    4. **层叠**:CSS的“层叠”特性意味着当一个元素被多个样式覆盖时,会根据特定的层叠顺序决定最终应用的样式。 5. **盒模型**:CSS盒模型是理解元素尺寸的关键,它包括元素的内容区域、内边距(padding)、边框...

    css样式应用优先级实用PPT课件.pptx

    CSS 样式应用优先级是指在CSS样式规则应用时的顺序和优先级。该优先级规则决定了哪些样式规则将被应用于HTML元素。下面是CSS样式应用优先级的详细解释: 1. 重要声明(!important) 重要声明是CSS样式规则中最高的...

    div+css样式与布局实例

    - 通过类(class)或ID(id)属性,我们可以对`<div>`元素进行针对性的CSS样式设置。 2. **CSS基础** - CSS是层叠样式表,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。 - 基本语法包括选择...

    Web设计者CSS样式设计指南(CHMWrox.Professional.CSS

    总之,《Web设计者CSS样式设计指南》全面覆盖了CSS的基础与高级技巧,无论是初学者还是经验丰富的设计师,都能从中获得宝贵的知识和实战指导,提升自己的Web设计技能。通过深入学习和实践,读者可以更好地掌握这一...

    CSS3样式表- 层叠样式表种类.pptx

    CSS3样式的优先级顺序是:`!important` > 内联样式 > 内嵌样式 > 外部样式。`!important`语法用于强制应用某个样式,无论其他样式的优先级如何,都会被覆盖。但是,过度使用`!important`可能会导致代码难以维护,应...

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

    一般来说,CSS 样式的优先级顺序是:[1 位重要标志位] > [4 位特殊性标志] > 声明先后顺序。 使用 `!important` 可以改变优先级别为最高,其次是 `style` 对象,然后是 `id` > `class` > `tag`。在同级样式中,按照...

    css2.0样式表中文手册

    层叠是CSS2.0的重要特性,它决定了哪些样式会覆盖其他样式。优先级通常根据来源、特异性、声明顺序等因素决定。继承则是指子元素可以继承父元素的一些样式,如字体大小和颜色,但不是所有属性都可继承。 **3. 盒...

    CSS 样式覆盖原理示例介绍

    总结来说,CSS样式覆盖的原理主要依赖于选择器的权重和层叠原则。理解这些规则可以帮助开发者更精确地控制网页的视觉呈现,避免不必要的样式冲突,并实现预期的设计效果。在编写CSS时,合理规划和使用选择器权重,能...

    CSS样式覆盖规则全面了解

    总结来说,掌握CSS样式覆盖规则对于创建一致且可预测的网页布局至关重要。理解继承机制、权值计算、以及`!important`的使用,可以帮助我们更好地控制样式表的行为,从而在实际开发中减少冲突并提高效率。作为前端...

    图片层叠显示CSS样式

    在网页设计中,图片层叠显示CSS样式是一种常见的视觉效果,用于增强用户体验和交互性。本文将深入探讨如何使用CSS和JavaScript实现一个图片导航菜单,该菜单不仅具有悬浮展开功能,还能保持当前选定的菜单链接状态。...

    解决vue+elementui项目打包后样式变化问题

    main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染。 代码如下: main....

    级联样式表CSS学习笔记

    - CSS选择器具有不同的优先级,决定了样式规则的应用顺序。 - 优先级从高到低排序为:内联样式 > ID选择器 > 类选择器 > HTML标签选择器 > 通用选择器。 - 示例: - 假设有以下规则: ```css p { color: blue;...

    css3.0 样式表手册

    理解CSS的选择器权重(ID、类、属性和元素选择器的组合)至关重要,这决定了哪些样式会覆盖其他样式。 **五、媒体查询与响应式设计** `@media`规则是实现响应式设计的关键,允许根据设备特性和视口尺寸应用不同的...

    CSS样式电子书

    **CSS样式电子书** 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,使网页呈现出丰富多彩、布局精致的效果。本电子书"CSS样式电子书"深入浅出地介绍了CSS的...

Global site tag (gtag.js) - Google Analytics