188bet手机版

  • 时间:2019-01-14 22:10 作者:IT豆豆 来源:IT豆豆 阅读:129
  • 扫一扫,188bet手机版访问
摘要:因为前面章节所述的CSS继承特性以及多种类型的选择器作用域范围会出现重叠,所以常会有多个CSS规则作用于同一个HTML元素。比方对于下面的HTML代码:CSS优选级课程.我们分别使用标签(tag)、类(class)和ID选择器来设置元素的颜色:p{ color: blue;}.message{ co

因为前面章节所述的CSS继承特性以及多种类型的选择器作用域范围会出现重叠,所以常会有多个CSS规则作用于同一个HTML元素。比方对于下面的HTML代码:

CSS优选级课程.

我们分别使用标签(tag)、类(class)和ID选择器来设置元素的颜色:

p{ color: blue;}

.message{ color: green;}

#introduction{ color: red;}

这3条CSS规则都选定了上述的p元素,但是浏览器只能用一种颜色来绘制文本。相似这样的样式冲突,到底哪个规则会起作用呢?

答案是靠级联(cascade)

级联将结合重要性、具体性(或者称为特殊性:Specificity)以及出现的顺序来决定每一种样式属性的权重, 这个权重将会用来决定浏览器将会采用哪一种样式属性,权重高的则优先使用(具备更高的作用优先级)。上例中p的颜色将会是红色,由于 #id 选择器是最具体的也因而是最重要的。

权重(或者优先级)是怎样计算的

CSS将通过以下四步来计算每一个样式属性的权重:

1. 对于一个给定的样式属性,例如color,先找出应用到某一个指定元素的所有CSS选择器(Selector)

2. 根据公告的重要性和来源对选择器进行排位

3. 根据具体性(Specificity)来对拥有同样重要性的选择器进行排拉

4. 最后,假如重要性、起源和特异度都一样的话,将根据样式属性出现的顺序来排拉,后来者居上,最后一个出现的获胜。

下面逐一说明每一步的实际执行方式:

第一步,遍历所有选择器

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

这里提到的媒体类型是CSS2中一个非常有用的属性,通过media type我们可以对不同的设施指定特定的样式,从而实现更灵活多样的界面,CSS3的媒体查询(media query)是对媒体类型的一个加强,后面的课程会详细探讨。 常用的media type包括all/screen/print,可以通过如下的方式定义:

浏览器样式

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

客户样式

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

作者样式

网页创立者建立的样式表,是网站源代码的一部分,就是我们所讲述的在HTML文档中引入的CSS文件或者内置style样式。

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

通常情况下,作者样式具备最高的重要性,其次是客户样式,最后才是浏览器样式,但是假如出现了!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 (1个id选择器)

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

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

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

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

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

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

#introduction{ color: red;}

.message{ color: green;}

p{ color: blue;}

HTML/CSS高级教程。

如何避免冲突

虽然浏览器能够解决CSS样式冲突,但避免不必要的样式冲突依然是一个好的编程习惯,就可以避免意外的样式覆盖,也有助于减少无谓的优先级计算。

我们推荐的编码规范是:

  • 尽量使用 class,而不是id,即便该元素在HTML文档中只出现过一次

  • 避免在一个HTML元素上使用多个类:不建议这样写

    ,建议写成

    ,后者具备更好的语义形容性

  • 避免使用内联样式(inline styles) 比方

当然上面的只是一般性建议,很多场合下给一个HTML元素增加多个类是有益的,比方给所有希望被隐藏的元素加上hidden类(display:none),可以提高样式代码的复用度。

前台设计,不得不知的CSS优先级及我们的建议

  • 全部评论(0)
188bet下载发布的资讯信息
【系统环境|】你是HTML 5的一员吗?(2019-08-15 11:58)
【系统环境|】Web前端基础怎么学?html、css、JavaScript 知识架构图(2019-08-14 17:55)
【系统环境|】零基础小白走Web前端之路是否可行?答案是yes!(2019-08-13 11:44)
【系统环境|】你知道Web前端与HTML5技术的区别吗?(2019-08-12 14:10)
【系统环境|】移动前端开发和web前端开发的区别(2019-08-11 16:49)
【系统环境|】给新手的锦囊:Web前端开发小白的学习建议和路线图(2019-08-10 16:34)
【系统环境|】都说web前端开发薪资高,入行就有上万月薪,转行难吗?(2019-08-09 14:55)
【系统环境|】干货教程 | Web前端开发学习入门指南(2019-08-08 18:27)
【系统环境|】前端开发:vue路由之前端路由的原理(2019-08-07 13:17)
【系统环境|】你不知道的web前端那些事(2019-08-06 12:29)
188bet手机版二维码188bet手机版访问领取大礼包
返回顶部