首页 web前端 html教程 CSS的独特性Specificity的示例代码分析

CSS的独特性Specificity的示例代码分析

Mar 29, 2017 pm 05:39 PM

CSS是一个陈述性语言,你可以为DOM中每个元素定义规则风格, 在这些定义中,一些规则会比在顺序上在后面的其他规则具有更高的优先权,比如inline内联就比其之前定义的规则更优先,比如如果我们有下面HTML和CSS代码:

<button class="button-warning">
登录后复制

其CSS是:

.button-warning {
background: red;
}


button, input[type=submit] {
background: gray;
}
登录后复制

因为.button-warning 在 button, input[type=submit]之前定义,按顺序关系猜测,它的background: red会被后者的background: gray覆盖,其实不是,它反而比后者更优先。

一些selector选择器会比其他更具有特殊性,比如#id选择器比.class选择器更高优先权。因为选择器之间有这种相比而言更具特殊性或优先权的现象,因此,如果我们不断任意用一个选择器高于另外一个选择器,那么就会陷入特殊性地狱,因为楼外有楼,山外有山,这样的代码难以维护。所以,在编写选择器时,我们需要问自己,这个选择器是能实现功能的中最低级别的?

下面是特殊性的层次,从高到低:

1.内联最高,内联是用在XHTML中的style内部,直接和XHTML元素挂钩,比如:

<h1 style="color: #fff;">
登录后复制

这个就是在h1元素中内联了style值为”color: #fff;“,这个内联是比其他包括在css文件中的h1定义更具有特殊性,优先权最高,尽管你在css文件中也定义了h1的style,但是因为有了这行的内联定义而失效。

2. 其次是选择器的ID,ID是HTML元素的唯一标识,使用#前缀,比如#p。

3.再次是选择器的类 属性伪类,包括以圆点为前缀的.classes [属性] 或伪类的:hover :focus

4.Html元素和伪元素 包括:before:after实例

如果一个元素综合了以上多个特殊性,那么计算特殊性的分数越高,优先权越高,如何计算特殊性?

首先从0分开始,内联增加1000分,ID增加100分,类和伪类加10分,元素和伪元素 加1分。

比如:

body #content .data img:hover
登录后复制

特殊性分数值计算如下:#content是ID,故加100分;.data是类,故加10分;而:hover是伪类故加10分,body是属于Html元素故加1分,而img也是Html元素故加1分,总分是122分。

比如:CSS定义如下:

a{ color:blue;}
p a{ color:green;}
p a.mycolor{ color:red;}
登录后复制

那么Html规则使用如下:

<p><a href="#" class="mycolor"></a></p>
登录后复制

那么,最后哪个定义占据优先权,也就是字体到底是什么颜色?注意这里有一个.mycolor选择器类是分数最高,会加10分,因此这个字的颜色最后为红色。当然,如果没有.mycolor定义,比如:

<p><a href="#" ></a></p>
登录后复制

这时颜色是绿色,因为都是有两个普通html元素p和a,分数为2。

所以,这里有另外一个计算特殊性方法:

  1. 统计选择器中ID的数量,也就是#p之类数量

  2. 统计选择器中的.class类数量

  3. 统计html元素名称和伪元素数量

最后,按照三个顺序从高到低1条-2条-3条定义特殊性。

以上就是CSS的独特性Specificity的示例代码分析的内容,更多相关内容请关注PHP中文网(www.php.cn)!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue中placeholder是什么意思 vue中placeholder是什么意思 May 07, 2024 am 09:57 AM

vue中placeholder是什么意思

vue中空格怎么写 vue中空格怎么写 Apr 30, 2024 am 05:42 AM

vue中空格怎么写

vue中怎么获取dom vue中怎么获取dom Apr 30, 2024 am 05:36 AM

vue中怎么获取dom

js中span是什么意思 js中span是什么意思 May 06, 2024 am 11:42 AM

js中span是什么意思

js中rem是什么意思 js中rem是什么意思 May 06, 2024 am 11:30 AM

js中rem是什么意思

vue中引入图片的方法 vue中引入图片的方法 May 02, 2024 pm 10:48 PM

vue中引入图片的方法

span标签的作用是什么 span标签的作用是什么 Apr 30, 2024 pm 01:54 PM

span标签的作用是什么

浏览器插件是什么语言写的 浏览器插件是什么语言写的 May 08, 2024 pm 09:36 PM

浏览器插件是什么语言写的

See all articles