欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > CSS入门 >

四个步骤看CSS计算每一个样式属性的权重

22选5河南最新开奖今 www.gsf5k.cn  

第一步,遍历所有选择器

浏览器在渲染某个HTML元素时,首先会寻找所有作用在该元素上的有效CSS选择器,为此,它根据指定的媒体类型(media type)遍历所有的样式表来源,选择器的来源包括:用户代理(浏览器)样式、作者样式和用户样式。

常用的media type包括all/screen/print,可以通过如下的方式定义: <link href="style.css" media="screen print" ...>

浏览器样式

也就是浏览器自身设置用来显示网站的默认样式,不同的浏览器可能有不同的样式表,例如ChromeIE、Firefox的就不一样,所以大家分别使用这些浏览器访问同一个网站的时候,看到实际效果可能就不尽相同。

用户样式

浏览器还允许用户设置网页的样式,例如,我们用IE浏览网站的时候,都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。

第二步,比较样式属性的重要性

通常情况下,作者样式具有最高的重要性,其次是用户样式,最后才是浏览器样式,但是如果出现了!important标记的话,那么规则会被改变,通过!important 可以提高某种样式的重要性,让它的优先级高于其他没有加该声明的所有样式。下面是样式属性的重要性顺序(由高至低):

1. 标记为!important的作者样式

2. 标记为!important的用户样式

3. 作者样式

4. 用户样式

5. 浏览器(用户代理)的默认样式

第三步,比较样式属性的具体性(Specificity)

具体性可以通过一个简化易用的1000法则来计算

内联样式(inline styling) 权重 1000

ID#id) 权重 100

类(.class) 权重 10

标签(tag) 权重 1

然后你可以把多个选择器的权值相加,来得到最终的Specificity

p 具体性 1 (1个标签选择器)

div p 具体性 2 (2个标签选择器, 1+1)

tree 具体性 10 (1个类选择器)

div p.tree 具体性 12 (2个标签选择器 + 1个类选择器, 1+1+10)

#baobab 具体性 100 (1id选择器)

body #content .alternative p 具体性 112 (标签选择器 + id选择器 + class选择器 + 标签选择器, 1+100+10+1)

选择器具体性的完整计算公式要比上面复杂得多,但了解上面的法则在一般情况下已经足够。

第四步,判断样式属性出现的先后顺序

这一步最简单,出现晚的选择器将拥有高优先级,也就是后来者居上。

对于外部引入的样式表,@importlink拥有更高的优先级,不管它是否出现在link引入之后。

理解了上述的优先级计算规则,我们应该可以推断出前面例子中p元素的最终颜色:

#introduction{ color: red;}

.message{ color: green;}

p{ color: blue;}

<p class="message" id="introduction">

HTML/CSS高级教程。

</p>

如需转载,请注明文章出处和来源网址://www.gsf5k.cn/rumen/r39122.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2017-09-09 13:42 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 战果累累的传奇英雄——吴光浩 2018-11-12
  • 重庆奉节羊市镇“里程长”上岗 小镇大变样 2018-11-12
  • 抗战胜利70周年东方主战场影像馆 2018-11-12
  • 湖北省人民政府门户网站 2018-11-11
  • 鹅肝做成冰淇淋 玉米做成小螃蟹?这位意大利厨神太6了 2018-11-11
  • 合肥市安庆路第三小学介绍护学岗工作的优秀经验 2018-11-10
  • 卫星地图探访海湖庄园 2018-11-10
  • 50 世界杯揭幕战惨案竟然是中国足球制造的?! 2018-11-10
  • 有一种税叫“亚裔税” 哈佛大学被控招生政策歧视亚裔学生 2018-11-09
  • 广州市黄埔警方推进网格化、精细化社区警务管理模式 2018-11-09
  • 习近平:在会见第一届全国文明家庭代表时的讲话 2018-11-09
  • 夏天一个动作可能令心脑血管瞬间崩溃 2018-11-09
  • 美国代表历史与现在,中国代表现在与未来。美国产品退出中国市场,几乎等于退出亚洲市场 2018-11-08
  • 法国总统马克龙首次访华 法国居民期待成果 2018-11-08
  • 【北京团购】东风日产年末购车惠 签到送LB燃油宝优惠 2018-11-08
  • 771| 630| 84| 322| 972| 132| 378| 179| 959| 936|