`
bz5811
  • 浏览: 32970 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

css样式表中的样式覆盖顺序(转)

阅读更多

有时候在写CSS的过程中,某些限制总是不起作用,这就涉及了CSS样式覆盖的问题

 

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

 

1. 样式表的元素选择器选择越精确,则其中的样式优先级越高:

id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

所以上例中,#navigator的样式优先级大于.current_block的优先级,及时.current_block是最新添加的,也不起作用。

 

2. 对于相同类型选择器制定的样式,在样式表文件中,越靠后的优先级越高

注意,这里是样式表文件中越靠后的优先级越高,而不是在元素class出现的顺序。比如.class2 在样式表中出现在.class1之后:

.class1 {
    color: black;
}

.class2 {
    color: red;
}

 而某个元素指定class时采用 class="class2 class1"这种方式指定,此时虽然class1在元素中指定时排在class2的后面,但因为在样式表文件中class1处于class2前面,此时仍然是class2的优先级更高,color的属性为red,而非black。

 

3. 如果要让某个样式的优先级变高,可以使用!important来指定:

.class1 {
    color: black !important;
}

.class2 {
    color: red;
}

 

分享到:
评论

相关推荐

    CSS样式表中文手册

    **CSS样式表中文手册** ...以上是对"CSS样式表中文手册"中可能涵盖的关键点的简要介绍。通过深入学习和实践,你可以掌握CSS,从而构建美观、功能丰富的网页。记得查阅提供的CHM文件,它将提供更详尽的解释和示例。

    形考任务五 使用 元素以及CSS样式表对下面的内容进行的布局设计.zip

    在本形考任务中,我们将探讨如何利用HTML的`<div>`元素以及CSS样式表来实现页面布局设计。`<div>`元素是HTML中的一个非常重要的结构元素,它用于组合其他HTML元素,形成一个可样式的区块。在这个任务中,我们将深入...

    CSS样式表.doc

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

    CSS层叠样式表学习指南

     中文翻译为样式表! 它的作用简单的说:就是可以使你在同一页面里使用不同的超链接样式。  更神奇的是,用CSS,仅仅改变一个文件就可以改变数百个网页的外观......个性化的表现而不损失访问者......所有这些都因为...

    CSS样式表高效使用的技巧

    CSS 样式表高效使用的技巧是指在网页设计中,如何充分利用 CSS 的强大性和灵活性来提高网页的维护更新效率和可读性。以下是五个高效使用 CSS 的技巧: 1. 在一个网页中同时调用 CSS 的多种引入方式 在 HTML 中引入...

    css样式表中文手册

    《CSS样式表中文手册》是学习网页设计与前端开发的重要参考资料,主要涵盖了CSS(Cascading Style Sheets)的全面知识,旨在帮助用户理解和掌握CSS语言,实现网页的美化与布局控制。这个手册可能是以CHM(Compiled ...

    CSS样式表.ppt

    【CSS样式表】是网页设计中的重要组成部分,全称为Cascading Style Sheets,它用于分离网页内容(HTML或XML等)与表现样式。通过CSS,我们可以精确地控制网页元素的布局、字体、颜色、背景、边框以及定位,实现更...

    css2.0样式表中文手册

    **CSS2.0样式表中文手册** CSS,全称Cascading Style Sheets,是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS2.0是其第二个主要版本,发布于1998年,它极大地增强了网页设计...

    CSS样式表中文手册系列 苏沈小雨

    《CSS样式表中文手册系列——苏沈小雨》是一份极具价值的学习资源,专为对CSS(Cascading Style Sheets)感兴趣的初学者和进阶者设计。这份手册深入浅出地介绍了CSS的核心概念、语法以及实际应用技巧,帮助读者全面...

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

    此外,CSS3还支持样式层叠,这意味着可以从多个样式表中合并样式,以实现优先级控制。 **CSS3的种类** 1. **内联样式表**:将样式直接写在HTML元素内部,使用`style`属性,如`;">`。这种方式针对性强,但不推荐大量...

    css 样式表参考手册

    《CSS样式表参考手册》是Web开发者不可或...以上是CSS样式表参考手册中的一些关键知识点,深入理解和掌握这些概念,将有助于创建高效、优雅的网页设计。实际应用中,结合HTML文件,我们可以实现更丰富的网页表现效果。

    CSS样式表中文手册2.0 中文手册

    在这个《CSS样式表中文手册2.0》中,我们将深入探讨这个版本中的各种概念、规则和用法。 首先,**选择器**是CSS的核心部分,它们用于定位文档中需要应用样式的元素。在CSS2.0中,不仅支持基础的选择器如ID选择器(#...

    CSS层叠样式表技术手册

    此外,CSS允许层叠多个样式定义,具有明确的优先级顺序:内联样式(最高优先级)、内部样式表、外部样式表和浏览器默认样式。这种层叠机制确保了在样式冲突时,优先级高的样式生效。 CSS的语法结构简洁明了,由选择...

    CSS样式表手册全集chm

    《CSS样式表手册全集chm》是苏昱创作的一部关于网页设计的重要参考资料,它全面涵盖了CSS(Cascading Style Sheets)的核心概念、语法以及实际应用。此手册旨在帮助网页设计师和开发者深入理解并熟练掌握CSS技术,...

    CSS层叠样式表介绍

    **CSS层叠样式表简介** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括SVG、MathML等各种XML方言)文档样式的样式表语言。它的主要作用是将表现和内容分离,使得网页设计更加灵活,易于维护。在传统...

    北大青鸟CSS样式表

    在“北大青鸟CSS样式表”课程中,我们将深入探讨这一强大的技术。 **一、CSS基本概念** 1. **选择器与声明**:CSS的核心在于选择器和声明。选择器用于定位HTML元素,声明则定义元素的样式属性和值,如`color:red;`...

    CSS样式表授课PPT

    这个“CSS样式表授课PPT”包含了对这一关键技能的深入讲解,分为两部分:第一课——Css 样式基本知识和第二课——在网页中使用Css样式。 ### 第一课:Css 样式基本知识 1. **定义和用途**:CSS是用于分离网页内容...

Global site tag (gtag.js) - Google Analytics