日照网络公司
扫描关注网站建设微信公众账号

扫一扫微信二维码

日照网站建设公司教你CSS使用层叠顺序

昊诺网络o2017-08-18 09:03:34o网络知识o

日照网站建设公司教你CSS使用层叠顺序


CSS支持给同一个元素多次设置相同的规则,这就是所谓竞争规则(Competing Rule)。浏览器使用层叠顺序来确定一组竞争规则中真正生效的规则。例如,浏览器会给每一个元素设置默认规则。当给一个元素设置规则时,这个规则会与默认规则竞争,但是由于它具有较高的层叠优先级,所以它会覆盖默认规则。

层叠顺序会根据规则使用的选择器类型将规则划分为6组。高优先级分组的规则将覆盖低优先级分组的竞争规则。这些分组按照各个选择器的特殊性进行划分。优先级越低,那么这一分组的选择器的特殊性越低。

层叠顺序的基本原则是用一般(general)选择器设置文档总体样式,用特殊(specific)选择器覆盖一般选择器,从而设置特殊样式。

例如,使用*{margin-bottom:0;}可以将文档所有元素的底部外边距设置为0;使用p{margin- bottom: 10px;}可以将文档所有段落的底部外边距设置为10像素;使用*.double-space {margin-bottom:2em;},可以将设置double-space类的少数段落的底部外边距设置为2em;而使用#paragraph3 {margin- bottom:40px;},则可以将一个段落的底部外边距设置为40像素。

下面是优先级由高到低排列的6种选择器分组。

(1) 添加了!important规则的分组享有很高优先级。它们会覆盖所有不带!important的规则。例如,#i100{border:6px solid black!important;}的优先级高于#i100{border:6px solid black;}。

(2) 第2优先级分组是style属性所嵌入的规则。由于使用style属性的代码难以维护,所以不推荐使用这种方法。

(3) 第三优先级分组是具有一个或多个ID选择器的规则。例如,#i100{border:6px solid black;}的优先级高于*.c10{border:4px solid black;}。

(4) 第四优先级分组是具有一个或多个类、属性或伪选择器的规则。例如,*.c10{border:4px solid black;}优先级高于div{border:2px solid black;}。

(5) 第五优先级分组是具有一个或多个元素选择器的规则。例如,div{border:2px solid black;}优先级高于*{border:0px solid black;}。

(6) 最低优先级分组是指那些只包含通配选择器的规则,例如*{border:0px solid black;}。

如果竞争规则属于同一个选择器分组(假设两个规则都包含ID选择器),那么它们的优先级会进一步根据选择器的类型和数量进行比较。如果一个选择器比竞争选择器具有更多高优先级选择器,那么这个选择器的优先级就更高。例如,#i100 *.c20 *.c10{}的优先级高于#i100 *.c10 div p span em{}。因为二者都含有ID选择器,所以它们都属于第三优先级分组。因为第一条规则包含两个类选择器,而第二条规则只有一个类选择器,所以第一条规则的优先级更高——即使第二条规则具有为数更多的选择器。

如果竞争规则属于相同的选择器分组,并且具有相同数量和级别的选择器,那么它们会进一步按照位置进行优先级比较。所有属于高优先级位置的规则会覆盖低优先级位置的规则。(同样,这个方法有效的前提是竞争规则位于同一个选择器分组,并且具有相同数量和级别的选择器。选择器分组总是优先于位置分组。)

下面是优先级由高到低排列的6个位置。

(1) 最高优先级的位置是HTML文档头部的<style>元素。例如,<style>元素的规则会覆盖<style>元素中@import语句所导入的样式表中所包含的竞争规则。

(2) 第二优先级的位置是<style>元素中@import语句所导入的样式表。例如,<style>元素中@import语句导入的样式表规则会覆盖<link>元素附加的样式表规则。

(3) 第三优先级的位置是<link>元素附加的样式表。例如,<link>元素附加的样式表规则会覆盖样式表中@import语句所导入的竞争规则。

(4) 第四优先级的位置是<link>元素附加的样式表中@import语句所导入的样式表。例如,链接样式表中@import语句导入的规则会覆盖最终用户附加的样式表的竞争规则。

(5) 第五优先级的位置是最终用户附加的样式表。

有一种例外情况是最终用户样式表中的!important规则。这些规则具有最高优先级。这样,最终用户就能够创建一些规则,覆盖初始样式表中的竞争规则。
(6) 低优先级的位置是浏览器提供的默认样式表。

如果在同一个位置级别上附加或导入了多个样式表,那么它们的优先级由附加的顺序决定。后面附加的样式表将覆盖前面附加的样式表。

如果竞争规则属于同一个选择器分组,具有相同数量和等级的选择器,并且具有相同的位置级别,那么代码中位置较后的规则会覆盖前面的规则。

在例1-7中,样式表中每一条规则都会应用于div元素上。每一条规则都给<div>设置不同的border-width。层叠顺序决定了实际应用的规则。我把样式表中的样式按照重要性从低到高的层叠顺序进行排列。从截图中可以看到,浏览器将后面一条规则应用到<div>上,将<div>的边框宽度设置为14像素。浏览器之所以选择这条规则,是因为它具有高优先级的层叠顺序,它附加了!important的ID选择器。

注意,ID选择器覆盖类选择器,类选择器覆盖元素选择器,元素选择器又覆盖通配选择器。而且,!important会使选择器获得更高一级的重要性。例如,添加!important的通配选择器优先级高于未添加!important的ID选择器。

注意,body和html选择器的border-style:none!important;会覆盖通配选择器*,从而去掉<body>和<html>的边框。这也说明了元素选择器会覆盖通配选择器。

QQ截图20170818091234.jpg

以上是日照网站建设公司(昊诺网络公司)分享,如果大家喜欢该分享想了解更多,请关注我们的网站动态!

 

文章关键词