`
lanceverw
  • 浏览: 44851 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

CSS样式优先级

    博客分类:
  • CSS
css 
阅读更多

CSS继承优先级,留做备忘。

基本html代码:

<!DOCTYPE html>
<html>
<head>
  <title>Test the order of style</title>
  <link rel="stylesheet" type="text/css" href="style/external.css"/>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

 本页面引用了外部样式external.css:

@import url('base.css');
@import url('another.css');

 

可以看到external.css中又引用了base.css和another.css两个样式表:

在base.css中将p元素颜色设定为黄色, 在another.css将p元素颜色设定为蓝色;

这个时候页面中将显示的是【蓝色】,因为,another.css出现在base.css之后,优先级高于base.css;

 

如果在external.css中将p元素的颜色改为红色,那么页面中最终呈现的颜色将会是【红色】,因为,被import的样色表优先级【低于】引用的样式表。

 

总的说来CSS中样式表优先级如下:

内部样式表 > 外部样式表 > 外部样式表引用的样式表(被引用的样式表后出现的优先级较高) > 浏览器自带样式

分享到:
评论

相关推荐

    css样式优先级比较实例

    本实例将深入探讨CSS样式的优先级比较,帮助你更好地理解和控制页面的视觉呈现。 首先,我们需要了解CSS选择器的权重计算规则。CSS选择器的权重分为四类:内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素...

    css优先级总结

    了解并掌握CSS优先级对于解决样式冲突问题至关重要。 ##### 1. 大小写不敏感性 CSS属性名和值不区分大小写。例如,`color:red;` 和 `COLOR:RED;` 是完全相同的。然而,在实际开发中,通常建议使用一致的大小写风格...

    css样式的优先级详解(本人整理过的,做过笔记)

    最权威的CSS样式优先级,本人整理过的,做过笔记。

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

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

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

    首先,让我们理解CSS样式的优先级。优先级由四个部分组成,每个部分代表一个特定的选择器类型: 1. **内联样式** (例如,`&lt;element style="..."&gt;`),其特殊性为[1.0.0.0]。 2. **ID选择器** (例如,`#example`),...

    HTML5&CSS3网页制作:CSS优先级.pptx

    在多个CSS规则应用于同一元素时,理解CSS优先级至关重要,因为它决定了哪个样式会生效。这个概念对于创建美观且功能完备的网页至关重要。 首先,我们来探讨CSS优先级的基本原则: 1. 继承性:当一个元素没有明确的...

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

    使用 DIV+CSS 做网站时 CSS 样式的优先级 在构建网站时,使用 DIV+CSS 是一种常见的做法。这种方法可以有效地节省网站代码所需的空间,提高网站加载速度。但是,在使用 CSS 样式时,不能忽视 CSS 样式的优先级问题...

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

    首先,给大家看一篇关于CSS优先级的示例 复制代码代码如下: &lt;span xss=removed&gt;&lt;html&gt; &lt;head&gt; &lt;style type=”text/css”&gt; #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...

    CSS 优先级使用技巧

    如果某样式是继承来的永远不如具体指定的优先级高。例子1:CODE:&lt;style type=text/css&gt; &lt;!– *{font-size:20px} .class3{ font-size: 12px; } –&gt; &lt;/style&gt; 我是多大字号?&lt;/span&gt; 运行结果:.class...

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

    例如,如果在LINK所链接的样式表(mycss.css)中定义了以下一条样式规则: H1{color:red}同时在嵌入式样式定义中也定义了一条规则:H1{color:yellow}在网页中的样式定义如下所示:&lt;HEAD&gt;&lt;LINK rel=...

    CSS优先级总结.pdf

    CSS优先级总结是一个非常重要的知识点,它决定了CSS样式的应用顺序和优先级。在CSS中,优先级是指样式规则的应用顺序,高优先级的样式规则将覆盖低优先级的样式规则。 在CSS中,有多种选择器可以用来指定样式规则,...

    css样式应用优先级实用PPT学习教案.pptx

    CSS样式应用优先级是网页设计中的关键概念,它决定了哪些样式会最终被浏览器应用到HTML元素上。在处理CSS冲突时,理解这个优先级规则至关重要。以下是对PPT内容的详细解释: 1. **重要声明 (!important)**: `!...

    CSS 优先级 详细分析

    CSS优先级是网页设计中一个至关重要的概念,它决定了浏览器如何解析和应用样式规则,从而影响页面元素的呈现。在深入探讨优先级之前,我们先简单回顾一下CSS的基础。CSS,全称为层叠样式表(Cascading Style Sheets...

    CSS优先级冲突:终极解决指南

    然而,在CSS的应用过程中,样式优先级冲突是一个常见的问题。本文将深入探讨CSS优先级冲突的原因、识别方法、解决策略,并提供实际应用示例,帮助读者更好地理解和处理这一问题。 #### 一、CSS优先级概述 CSS...

    解决CSS样式冲突的几个办法(小结)

    通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器 – MDN ),例如对于下述代码片段,如果想给.cellphones中的.apple增加样式,只使用.apple,势必会对.fruit中的.apple也造成影响。...

    Web前端开发中新手必看的CSS优先级关系教程共3页.pd

    理解CSS的优先级关系对于新手开发者来说至关重要,因为它能帮助你精确地控制元素的样式,避免样式冲突,使代码更加有序。本教程“Web前端开发中新手必看的CSS优先级关系教程共3页.pdf”旨在详细阐述这一主题。 首先...

    css优先级98908u0

    在CSS中,样式表的优先级决定了元素最终采用哪一套样式。理解CSS优先级的基本规则对于开发人员来说至关重要,尤其是在处理复杂的页面布局时。 1. **ID选择器**:具有最高的优先级,形如`#id{}`。例如,如果一个元素...

    CSS优先级算法如何计算?有哪些判定规定及计算方式

    关于CSS specificity CSS 的specificity 特性或称非凡性,它是一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的...1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。 如:&lt;div xss=removed&gt;sj

    CSS特异性:掌握样式优先级的艺术

    ### CSS特异性:掌握样式优先级的艺术 在前端开发领域,CSS(层叠样式表)是一种必不可少的语言,它用于描述网页...通过本文的学习,希望读者能够在自己的项目中更加自信地处理CSS样式冲突,提升开发效率和代码质量。

Global site tag (gtag.js) - Google Analytics