【CSS】CSS样式的优先级

CSS样式的优先级

CSS样式的优先级
如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

CSS样式的优先级

对于相同CSS起源来说，不同位置的样式其优先级也是不同的。一般来说，行内样式会优先于内嵌样式表，内部样式表会优先于外部样式表。而被附加了！important关键字的声明会拥有最高的优先级。
在实际开发中，如果作者设计网页字体颜色为14号黑色字体，而用户在浏览器里利用火狐浏览器的插件firebug修改页面字体为18号字体，那么浏览器该如何处理呢？
根据CSS层叠规则：作者设计的样式能够覆盖浏览器默认设置的样式，而用户在浏览器设置的样式可以覆盖作者的样式。同时,CSS根据样式的远近关系来决定层叠样式的优先级：在同等条件下，距离运用对象的距离越近就有较大的优先权，因而行内样式大于内部样式和外部样式。

如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

标签选择器：优先级加权值为1
伪元素或伪对象选择器：优先级加权值为1
类选择器：优先级加权值为10
属性选择器：优先级加权值为10
ID选择器：优先级加权值为100
其他选择器：优先级加权值为0，如通配选择器等
然后，以下面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则是：
统计选择器中ID选择器的个数，然后乘以100
统计选择器中类选择器的个数，然后乘以10
统计选择器中的标签选择器的个数，然后乘以1

以此方法类推，最后把所哟有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大
对于由多个选择器组合而成的复合选择器，首先分别计算每个组成选择器的加权值，接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式，如果分值相同，则根据位置关系来判断，越靠越近对象的样式就拥有越高的优先级。

            h3{color: #ff7300;}                        /*加权值=1分 */.f14{font-size: 14px;}                       /*加权值=10分 */#head{width: 960px;}                         /*加权值=100分 */h3 .f14{font-weight: bold;}                  /*加权值=1分+10分=11分 */#head h2{border: 1px solid #ff73;}         /*加权值=100分+1分=101分 */div p{padding: 0 10px;}                      /*加权值=1分+1分=2分 */div #head{margin: 0 auto;}                   /*加权值=1分+100分=101分 */#head h2 span{float: right;}                 /*加权值=100分+1分+1分=102分 */#head .f14 em{float: right;}                 /*加权值=100分+10分+1分=111分 */#head .f14 span em{float: right;}            /*加权值=100分+10分+1分+1分=112分 */#head div h2 .f12 span em{color: #000;}    /*加权值=100分+1分+1分+10分+1分+1分=114分 */

【CSS】CSS样式的优先级相关推荐

html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
html和css哪个优先,CSS3 | 样式和优先级
css3一般介绍: CSS注释:/*CSS*/ CSS长度单位: 1.px(像素) 2.em(倍数,一般用于文字) 一.HTML嵌套CSS3样式: 1.外部(推荐) 例如HTML文件为index.ht ...
css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
css的四种样式及其优先级
目录 1.行内样式代码 2.内嵌样式代码 3.外链样式代码 4.导入样式 5.四种样式的优先级 1.行内样式行内样式又叫标签样式,它是在标签里面加上style属性代码 <body> ...
css初级知识点(css样式分类、css选择器种类及优先级)
美化样式 Css样式分类行内样式:<标签名style="属性名:属性值;"></标签名> 内部样式:<style></style> ...
html和css执行顺序,CSS样式的优先级执行顺序和覆盖规则
好看的网站离不开css样式的布局和装饰,那么大量的css样式,它们的优先级执行顺序和覆盖规则是什么呢? CSS主要有三种引用方式:元素上的style.文件头上的style元素.外部样式文件.这三种优先 ...
CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法 css可以通过4种方式引入样式表根据不同的需求可以选择不同的引入方式但是它们也有不同的优缺点行内样式嵌入式样式外部样式 @import 导入的方式 1.行内样式特 ...
HTML样式表优先级最低的是,css的样式优先级
前几天做百度的笔试题,第一题就是关于css优先级的,虽然知道一些规则,但碰上把各条规则相互组合就懵逼了,所以还是得来好好总结一下的. 首要原则就两条: 优先级高的样式覆盖优先级低的样式同一优先级的 ...
css 层叠式样式表（2）
一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...

【CSS】CSS样式的优先级

CSS样式的优先级

CSS样式的优先级

如果多个不同类型的选择器同时为一个对象设置样式，该对象将如何显示最终样式呢？以下给出一个简单的计算方法。对于常规选择器，它们都拥有一个优先级加权值

【CSS】CSS样式的优先级相关推荐

最新文章

热门文章