CSS样式在网中执行的先后顺序与优先权

合集下载

CSS权重特殊性（优先级）

CSS权重特殊性（优先级）
CSS优先级
⼀.
在定义CSS样式时，经常出现两件或更多规则应⽤在同⼀元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意⼀些特殊的情况，如：
--继承样式的权重为0,即在嵌套结构中，不管⽗元素样式的权重多⼤，被⼦元素继承时，他的权重都为0,也就是说⼦元素定义的样式覆盖继承来的样式。

--⾏内样式优先，应⽤style属性的元素，其⾏内样式的权重⾮常⾼，可以理解为远⼤于100。

总之，他拥有⽐上⾯提⾼的选择器都⼤的优选级。

--权重相同时，CSS遵循就近原则，也就是说靠近元素的样式具有最⼤的优先级，或者说排在最后的样式优先级最⼤。

CSS定义了⼀个important命令，该命令被赋予最⼤的优先级。

也就是说不管权重如何以及样式位置的远近，important具有最⼤优先级。

⼆. CSS特殊性（Specificity）
关于CSS权重，我们需要⼀套计算公式来去计算，这个就是CSS Specificity,我们称为CSS特性或称⾮凡性，它是⼀个衡量CSS值优先级的⼀个标准，具体规范如下：
specificity⽤⼀个四位的数字串(CSS2是三位)来表⽰，更像四个级别，值从左到右，左⾯的最⼤，⼀级⼤于⼀级，数位之间没有时制，级别之间不可超越。

继承或者"的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个⾏内样式贡献值 1,0,0,0
每个!important贡献值 ∞ ⽆穷⼤。

CSS-----css三种样式以及css选择器的优先级问题

CSS-----css三种样式以及css选择器的优先级问题
css三种样式的优先级问题：
css⼀般三种使⽤样式为：内联式、内嵌式、外部式
内联式即在html的标签中书写样式；
内嵌式即css样式写在<style type="text/css">XXX</style>中，style 是在head标签⾥⾯；
外部式即通过link标签来引⽤，外部的css⽂件来控制标签样式，但是要放在sytle标签外head标签⾥。

CSS层叠样式表优先法则

CSS层叠样式表优先法则CSS样式优先级的收集、整理CSS 优先级法则：1. 选择器都有⼀个权值，权值越⼤越优先；2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；3. 创作者的规则⾼于浏览者：即⽹页编写者设置的CSS 样式的优先权⾼于浏览器所设置的样式（⽤户样式表）；若⽤户样式表设置了!important”规则，则优先级为最⾼级(⾼过内联样式)（个⼈添加）4. 继承的CSS 样式优先级低于后来指定的CSS 样式；5. 在同⼀组属性设置中标有“!important”规则的优先级最⼤。

多重样式优先级：如果外部样式、内部样式和内联样式同时应⽤于同⼀个元素，就是使多重样式的情况。

⼀般情况下，优先级如下：（内联样式）Inline style >（内部样式）Internal style sheet >（外部样式）External style sheet有个例外的情况，就是如果外部样式放在内部样式的后⾯，则外部样式将覆盖内部样式。

样式的层级关系：权重：权值的⼤⼩跟选择器的类型和数量有关样式的优先级跟样式的定义顺序有关标签选择器的权值永远都⽐⼀个类选器择器的权值低，⽆论有多少个————⽐较同⼀级别的个数，数量多的优先级⾼，如果相同即⽐较下⼀级别的个数important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承通配选择符的权值 0,0,0,0标签的权值为 0,0,0,1伪对象选择的权值为 0,0,0,1伪类选择的权值为 0,0,1,0类的权值为 0,0,1,0属性选择的权值为 0,0,1,0ID的权值为 0,1,0,0内联样式的权值为1,0,0,0important的权值为最⾼ 1,0,0,0,0权值使⽤规则：选择器的权值加到⼀起，⼤的优先；如果权值相同，后定义的优先。

同类选择器⽆加权选择器权重值的计算：A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。

CSS的优先级

CSS的优先级1）内嵌样式最高，其次是内部样式与外部样式并列，以最后定义的为准2）同等条件下，ID选择符 > 类选择符 > 标记选择符3）可以用!important进行提升例如：<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS优先级</title><style type="text/css">.title{width:350px;margin:auto;}h1{color:red!important;}.color{color:pink;}#h1Title{color:orange;}</style></head><body><div><div class="title"><h1 style="color:gray;" id="h1Title" class="color">纤笔一支谁与似？</h1></div></div></body></html>这样下来，字体的颜色就是红色，尽管标记选择符(在这里是 h1)原本最低，但经过!important提升以后，就成了最优先。

注意这个!important不是针对选择符，而是针对属性。

比如这个h1选择符里，如果有多个属性的话，只有后面附上!important的属性才会提升，而并非一人得道，鸡犬升天。

css选择器的优先级规则。

CSS选择器的优先级规则是用于确定在多个选择器应用于同一个元素时，哪个选择器的样式将优先应用。

优先级规则按照以下顺序确定：
1. 内联样式：直接在元素的style属性中定义的样式具有最高的优先级，将覆盖其他所有样式。

2. ID选择器：如果有多个ID选择器应用于同一个元素，只有第一个ID选择器的样式将被应用。

3. 类选择器、属性选择器和伪类选择器：这些选择器的优先级相同，如果有多个相同优先级的选择器应用于同一个元素，后面的选择器将覆盖前面的选择器。

4. 元素选择器和伪元素选择器：如果有多个相同优先级的选择器应用于同一个元素，后面的选择器将覆盖前面的选择器。

5. 通配符选择器和继承的样式：这些样式的优先级最低，将被其他所有选择器覆盖。

在编写CSS样式时，需要注意遵循这些优先级规则，以确保所需的样式被正确应用。

可以通过合理地使用选择器以及避免使用内联样式来避免样式冲突和优先级问题。

css选择器的优先级规则。

CSS选择器的优先级规则是用于确定样式应用的顺序和优先级的规则。

以下是CSS选择器的优先级规则：1. 内联样式优先级最高：在HTML标签的style属性中定义的样式将覆盖所有其他样式。

2. ID选择器优先级次高：使用ID选择器定义的样式将优先于类选择器或标签选择器。

3. 类选择器和属性选择器的优先级相同：如果多个类选择器或属性选择器应用于相同的元素，则按照它们在样式表中出现的顺序应用。

4. 标签选择器的优先级最低：如果多个标签选择器应用于相同的元素，则按照它们在样式表中出现的顺序应用。

如果有多个选择器具有相同的优先级，则最后出现的样式将应用于元素。

为了创作符合标题内容的文章，我们需要注意以下要求：1. 避免在文章中插入任何网络地址：不使用任何以"http"开头的链接，以避免在文章中插入网络地址。

2. 不得包含数学公式或计算公式：文章内容应避免使用数学公式或计算公式，以确保内容的易读性。

3. 确保文章内容的独一性：避免内容重复出现，确保文章内容的独特性。

4. 文本需结构合理，段落明晰：文章应按照逻辑结构和段落进行组织，以增强阅读流畅性。

5. 不得使用插入任何形式的图片链接：文章中不应包含任何图片链接，以避免对网络资源的依赖。

6. 避免使用依赖图像的语句：文章中不应使用依赖图像的描述语句，如"如图所示"等字眼。

7. 不得反复提出同一个问题：避免在文章中反复提出同一个问题，以保持文章内容的连贯性。

8. 不必过多自我介绍：文章应着重刻画主题内容，不必在文章中过多自我介绍。

9. 文章应刻画明确，句式流畅：文章应使用明确的词汇和流畅的句式，以表达主题内容。

10. 使用准确的中文进行描述：文章应尽可能使用准确的中文进行描述，避免使用模糊或不准确的表达。

11. 内容需准确无误，严肃认真：文章内容应准确无误，严肃认真，并避免歧义或误导的信息。

通过以上要求，我们可以以人类的视角进行写作，创作出富有情感的文章，使读者感到仿佛是真人在叙述。

关于CSS样式优先级

关于CSS样式优先级一般情况下：[1位重要标志位] > [4位特殊性标志] > 声明先后顺序!important > [ id > class > tag ] 使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

-先来看下!important 这个诡异的东西。

1 <styletype="text/css">2 div{background: red !important; background: blue}3 </style> -除了IE6，其他浏览器都会显示背景为红色，正是!important的作用，意思就是只要我在这里我就是最重要的啦，任何东西都不能取代我，没看见都是一个！外加一个英文单词important 吗？很形象，很贴切了。

IE6这里会显示背景为蓝色，并不是IE6不支持!important，而是它会按照样式声明顺序后出现的覆盖前面的，此时它已经不认识!important了，它六亲不认了。

这正是广为流传的IE6 hack 之一。

而如果这样写会正常显示背景为红色：1 <styletype="text/css">2 div{background: blue; background: red !important; }3 </style> -再来看下4位特殊性标志[0.0.0.0]从左至右，每次给某一个位置+1，前一段对后一段具有无可辩驳的压倒性优势。

无论后一位数值有多大永远无法超过前一位的1。

1，内联样式[1.0.0.0] A：<span id="demo" style="color:red "></span>B：还有就是JS控制的内联样式style对象，document.getElementById("demo").style.color="red";这两者属于同一级别，不过一般情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，因为往往DOM操作是在DOM树加载完毕之后。

css权重及优先级问题

css权重及优先级问题很简单，你只需要再加⼀条 !important 的CSS语句，将其应⽤到更⾼优先级的选择器（在原有基础上添加额外的标签、类或 ID 选择器）上；或是保持选择器⼀样，但添加的位置需要在原有声明的后⾯（优先级相同的情况下，后边定义的会覆盖前边定义的）。

:not 伪类例外:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进⾏计数.⽆视DOM树中的距离有如下样式声明:body h1 {color: green;}html h1 {color: purple;}当它应⽤在下⾯的HTML时:<html><body><h1>Here is a title!</h1></body></html>浏览器会将它渲染成purple，即后⾯的优先级更⾼外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。

合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。

以由⼏个段落组成的典型⽂本页⾯为例。

第⼀个段落上⾯的空间等于段落的上外边距。

如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。

这意味着段落之间的空间是页⾯顶部的两倍。

如果发⽣外边距合并，段落之间的上外边距和下外边距就合并在⼀起，这样各处的距离就⼀致了。

可替换元素CSS ⾥，可替换元素是这样⼀些元素，其展现不是由CSS来控制的。

这些外部元素的展现不依赖于CSS规范。

典型的可替换元素有 <img>、<object>、 <video> 以及 <textarea>、 <input> 这样的表单元素。

⼀些元素，⽐如 <audio> 和 <canvas> ，只在⼀些特殊情况下是可替换元素。

十三：CSS之CSS的四种使用方法和优先级

⼗三：CSS之CSS的四种使⽤⽅法和优先级⼀：⾏内样式（内联样式）：在开始标签内添加style样式属性
⼆：内部样式（嵌⼊样式）：把css写到style标签内
三：外部样式（外联样式）：把css代码写到独⽴的⽂件中，⽂件扩展名为.css
引⼊外部⽂件
四：CSS导⼊式：
1.@import "外部CSS样式"
2.@import url(外部CSS样式)
五：四种⽅法在使⽤上的区别：
使⽤链⼊外部样式的好处
1.CSS和HTML分离
2.多个⽂件可以使⽤同⼀个样式⽂件
3.多⽂件引⾔同⼀个CSS⽂件，CSS只需下载⼀次
六：优先级：⾏内样式 > 内部样式 > 外部样式
说明：
1.链⼊外部样式表与内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最⾼（就近原则）。

Css选择器优先级整理_Css选择器优先级详解

更多：

Css选择器优先级整理 _Css选择器优先级详解
一、Css 优先级简介什么是 Css： 1.CSS 指层叠样式表（Cascading Style Sheets） 2.样式对应一如何显示HTML元素 3.解决内容与表现分离的问题，可以独立文件存储 4.多个样式定义可层叠为一个。
优先级基本规则：后来者居上。
二、Css 优先级通用规则： 1. ！important 在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。 2. 行内样式，在style属性里面写的样式。 3. id选择器 4. class选择器 5. 标签选择器 6. 通配符选择器* 7. 浏览器的自定义属性和继承 8.样式多级限制，层级更精确的样式优先。

CSS选择器的优先级规则是什么

CSS选择器的优先级规则是什么在网页设计和开发中，CSS（层叠样式表）是用于定义网页元素样式的关键技术。

而理解 CSS 选择器的优先级规则对于准确控制网页元素的样式表现至关重要。

首先，我们来明确一下什么是 CSS 选择器。

简单来说，选择器就是用于指定我们想要应用样式的网页元素的工具。

比如，｀p` 选择器可以选中所有的段落元素，｀myDiv` 选择器可以选中具有｀id=＂myDiv"｀的特定元素。

那么，当多个选择器都试图为同一个元素设置样式时，优先级规则就开始发挥作用了。

CSS 选择器的优先级可以通过以下几个方面来确定：1、内联样式（Inline Styles）内联样式是直接应用在 HTML 元素上的样式，通过｀style` 属性来设置。

例如：｀＜p style=＂color: red;＂＞这是一个段落<／p>｀。

内联样式具有最高的优先级。

这意味着如果一个元素同时被内联样式和其他样式表中的选择器定义了相同的样式属性，内联样式将覆盖其他样式。

2、｀id` 选择器｀id` 选择器通过元素的｀id` 属性来选中特定的元素，例如｀myElement` 。

｀id` 选择器的优先级仅次于内联样式。

在一个网页中，每个｀id` 值应该是唯一的。

3、类选择器（Class Selectors）、属性选择器（Attribute Selectors）和伪类选择器（Pseudoclass Selectors）类选择器通过｀classname` 的形式来选中具有指定类名的元素。

属性选择器根据元素的属性来选择，例如｀type=＂text"｀。

伪类选择器用于选择处于特定状态的元素，比如｀：hover` 表示鼠标悬停时的状态。

这几种选择器的优先级相同，当它们之间发生冲突时，后面定义的样式会覆盖前面的。

4、元素选择器（Element Selectors）和伪元素选择器（Pseudoelement Selectors）元素选择器直接通过元素的名称来选择，如｀p` 选择段落元素。

CSS之样式优先级机制

CSS之样式优先级机制多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应⽤于同⼀个元素，就是使多重样式的情况。

1、⼀般情况下，优先级从低到⾼，如下：浏览器缺省（即浏览器默认）→（外部样式）External style sheet →（内部样式）Internal style sheet →（内联样式）Inline style 注意：如果外部样式放在内部样式的后⾯，则外部样式将覆盖内部样式。

<head><style type="text/css">/* 内部样式 */h3{color:green;}</style><link rel="stylesheet" type="text/css" href="style.css"/></head><body><h3>测试！</h3></body> 2、选择器的优先权注： [1] 内联样式表的权值最⾼ 1000； [2] ID 选择器的权值为 100； [3] Class 类选择器的权值为 10； [4] HTML 标签选择器的权值为 1。

利⽤选择器的权值进⾏计算⽐较，⽰例如下：<html><head><style type="text/css">#redP p {/* 权值 = 100+1=101 */color:#F00;/* 红⾊ */}#redP .red em {/* 权值 = 100+10+1=111 */color:#00F;/* 蓝⾊ */}#redP p span em {/* 权值 = 100+1+1+1=103 */color:#FF0;/*黄⾊*/}</style></head><body><div id="redP"><p class="red">red<span><em>em red</em></span></p><p>red</p></div></body></html> 结果：<em> 标签内的数据显⽰为蓝⾊。

关于CSS样式优先级

关于CSS样式优先级⼀般情况下：[1位重要标志位] > [4位特殊性标志] > 声明先后顺序!important > [ id > class > tag ]使⽤!important可以改变优先级别为最⾼，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有⾼优先级。

先来看下!important 这个诡异的东西。

1<style type="text/css">2 div{background: red !important; background: blue}3</style>除了IE6，其他浏览器都会显⽰背景为红⾊，正是!important的作⽤，意思就是只要我在这⾥我就是最重要的啦，任何东西都不能取代我，没看见都是⼀个！外加⼀个英⽂单词 important 吗？很形象，很贴切了。

IE6这⾥会显⽰背景为蓝⾊，并不是IE6不⽀持!important，⽽是它会按照样式声明顺序后出现的覆盖前⾯的，此时它已经不认识!important了，它六亲不认了。

这正是⼴为流传的IE6 hack之⼀。

⽽如果这样写会正常显⽰背景为红⾊：1<style type="text/css">2div{background: blue; background: red !important;}3</style>再来看下4位特殊性标志 [0.0.0.0]从左⾄右，每次给某⼀个位置+1，前⼀段对后⼀段具有⽆可辩驳的压倒性优势。

⽆论后⼀位数值有多⼤永远⽆法超过前⼀位的1。

1，内联样式 [1.0.0.0]A：<span id="demo" style="color:red "></span>B：还有就是JS控制的内联样式style对象，document.getElementById("demo").style.color="red";这两者属于同⼀级别，不过⼀般情况是JS控制的内联样式优先级⾼，这与先后顺序申明有关系与本质⽆关，因为往往DOM操作是在DOM树加载完毕之后。

CSS样式的优先级别

CSS样式的优先级别优先原则一：文本从上到下，后出现的样式优先于前面出现的同一样式例：<style type=”text/css”>.def1{background:black;}.def2{background:yellow; }</style><div class=” def2 def1″>测试1</div>结果：所有浏览器均yellow色，注意：与class=”” 引号内的顺序无关，只看.def1和.def2在声明时的顺序，.def2后声明的所以权重高。

优先原则二：id声明（即 # 开头的样式）> class声明（即 . 开头的样式）> 标签声明(即类似 div 开头)以上三种声明处于不同的量级，份量上，div 开头相当于1克重，. 开头相当于 1公斤重，# 开头相当于 1吨重。

例：<style type=”text/css”>#bb{background:pink}.def{background:black;}div{background:yellow; }</style><div id=”bb” class=”def”>测试2</div>结果：所有浏览器均pink色，注意：虽然按优先原则一，后出现的权重高，但那只是在同样重量级下的比较，优先原则二各重量级别就不同了。

优先原则三：数量取胜。

如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成，则权重按出现符号的量级增加比如：#bb #tt #dd {background:red}则重量等于3吨#bb .tt ul.dd li {background:red}则重量等于1吨2公斤2克，这么精确的重量，就不需要举例了吧。

再次说明：优先原则一只适用两个样式声明同样重的情况优先原则四：‘!important’。

相当于无限重量，在之前已经有说明，需要注意：ie下，在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。

何为CSS样式优先级

何为CSS样式优先级当创建的样式表越来越复杂时，⼀个标签的样式将会受到越来越多的影响，这种影响可能来⾃周围的标签，也可能来⾃其⾃⾝。

下⾯我们从这两⽅⾯去看看 CSS 样式的优先级。

CSS 的继承性CSS 的继承特性指的是应⽤在⼀个标签上的那些 CSS 属性被传到其⼦标签上。

看下⾯的 HTML 结构：<div><p></p></div>如果 <div> 有个属性 color: red，则这个属性将被 <p> 继承，即 <p> 也拥有属性 color: red。

由上可见，当⽹页⽐较复杂， HTML 结构嵌套较深时，⼀个标签的样式将深受其祖先标签样式的影响。

影响的规则是：CSS 优先规则1：最近的祖先样式⽐其他祖先样式优先级⾼。

例1：<div style="color: red"><div style="color: blue"><div class="son"></div></div></div>如果我们把⼀个标签从祖先那⾥继承来的⽽⾃⾝没有的属性叫做"祖先样式"，那么"直接样式"就是⼀个标签直接拥有的属性。

⼜有如下规则：CSS 优先规则2："直接样式"⽐"祖先样式"优先级⾼。

例2：<div style="color: red"><div class="son" style="color: blue"></div></div>选择器的优先级上⾯讨论了⼀个标签从祖先继承来的属性，现在讨论标签⾃有的属性。

css样式的书写顺序及原理

css样式的书写顺序及原理刚开始学习前端的时候，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

那么是怎么个顺序呢？（1）定位属性：position display float left top right bottom overflow clear z-index（2）⾃⾝属性：width height padding border margin（3）⽂字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow（4）背景：background border（5）css3中新增属性：content box-shadow border-radius transform……按照上述1 2 3 4 5的顺序进⾏书写。

⽬的：减少浏览器reflow（回流），提升浏览器渲染dom的性能原理：浏览器的渲染流程为——①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显⽰⾄浏览器屏幕上就发⽣在②③④步骤，可见浏览器并不是⼀获取到css样式就⽴马开始解析⽽是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进⾏解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。

新手学习css优先级

新⼿学习css优先级css不是⼀种程序语⾔，⽽是⼀种描述语⾔。

因此，可以说，css理解起来是⾮常容易的，⼤部分⼈通过简单的学习就可以懂得如何写css代码来定义⽹页的样式。

但是，⼤部分⼈同样也会在写css的过程中产⽣很多困惑，⽐如为什么⾃⼰写的某段css没有⽣效，或者呈现出的样式和预计的不同，但⼜不知道要如何解决。

造成这些问题的主要因素，是css优先级。

css优先级是css中最难理解的概念之⼀，但对于掌握css来说⾮常重要。

理解css优先级，不仅有利于快速解决样式问题，⽽且能在布局层⾯，帮助我们写出更明晰，更合理的css代码。

什么是css优先级css的组成单元是样式规则（CSS Rule），单条样式规则的形式如下：其中，选择符（Selector）决定了后边所写的属性定义会作⽤到哪些元素，因此称为选择符。

css有⼀个核⼼特性，当多条样式规则中的同⼀个属性（⽐如padding）作⽤到了同⼀个元素，这些样式之间就会发⽣覆盖：图中由前端调试⼯具所显⽰的，被划掉的css样式，不会呈现在这⾥选中的⽹页元素上，因为它们被覆盖掉了。

css优先级，就是指在这种情况下，得出“应该由哪⼀条样式规则的内容覆盖掉其他的”这个结论的过程中所遵循的原则。

更⼀般的表述是，优先级⾼的css样式，将覆盖优先级低的css样式，成为最终⽹页元素的实际样式。

注意，前端调试⼯具显⽰的，”被划掉“的css样式，并不是说⼀定是完全覆盖。

css中的⼀些组合属性（⽐如margin，可以拆分为margin-top、margin-right、margin-bottom、margin-left），在这种样式覆盖中遵循的是局部覆盖的原则，即使在前端调试⼯具中它们看起来“整个都被划掉了”：css优先级的影响因素css优先级的影响因素要考虑三部分内容，css选择符权重、!important标识符、属性继承。

很多⽂章都阐述过css选择符权重这⼀点，但后⾯两部分却很少被提及。

HTML引入CSS样式三种方法及优先级

HTML引⼊CSS样式三种⽅法及优先级⽅法css的样式引⽤由3种⽅式。

分别为内联定义、链⼊内部CSS和链⼊外部CSS。

有⼀点注意，样式表放在不同的地⽅，产⽣作⽤的范围不同（以下会说明）。

内联定义内联定义，即在对象的标记内使⽤对象的style属性定义适⽤的样式表属性，格式定义为 :<div style="内容"><div>，如下⽰例浏览器此时显⽰内容链⼊内部CSSCSS内链接是由<style></style>标记对放在<head></head>中，在<style>中有⼀个类型属性type，后⾯接test/css，表⽰CSS⽂本，语法格式如下：<style type="text/css">/*这⾥写CSS内容*/</style>⽰例如下：效果图如下：链接外部CSScss外链接是把CSS⽂件放在⽹页外⾯，通过链接<link>使CSS⽂件对本⽹页的样式有效，就相当于的.h⽂件喽。

链接内部CSS：只作⽤在该CSS⽂件的⽹页中。

内联定义：只作⽤在定义该样式的div层中，对其它层⽆效。

三种样式优先级不知道以“优先级”这个词来形容是否合适，专业的如果看到莫怪。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

h2 {color: silver;}
/*一个普通元素，结果是 0,0,0,1 */ ——前者胜出
html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符，结果是0,0,1,7 */
关于specificity的具体计算在各种情况下的数字加成有如下一般规则：
每个ID选择符(#someid)，加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0
每个元素或伪元素(:firstchild)等，加0,0,0,1
有!important声明的规则高于一切。
如果!important声明冲突，则比较优先权。
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
由继承而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。
关于经由@import载入的外部样式，由于@import必须出现在所有其他规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
这里需要提一下IE，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其他规则定义之前的，这可能会引发一些误会。
所以优先权问题虽然看起来简单，但其背后还是有执行顺序与优先权的问题其实就是一个冲突解决的问题，当同一个元素(或内容)被CSS选择符选中时，就要按照优先权取舍不同的CSS规则，这其中涉及到的问题其实很多。
首先就是CSS规则的specificity(特殊性)，CSS2.1有一套关于specificity的计算方式，用一个四位的数字串(CSS2是三位)来表示，最终specificity越高的规则越特殊，在优先级判定时也就越有优势。
li#answer {color: navy;}
/* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */ ——后者胜出
除了specificity还有一些其他规则
文内的样式优先级为1,0,0,0，所以始终高于外部定义。
这里文内样式指形如<div style=”color: red”> blah</div>的样式，而外部定义指经由<link>或<style>标签定义的规则。
其他选择符包括全局选择符*，加0,0,0,0。
相当于没加，不过这也是一种specificity，后面会解释。
按这些规则将数字串逐位相加，就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。
举一些例子吧：
div css xhtml xml Example Source Code Example Source Code []
h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */ ——后者胜出
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/