CSS 优先级和特指度
1、ID 选择符 > 类选择符 > 元素选择符。特指度高的优先级高
2、行内样式 > 内嵌样式 > 链接样式
3、设定的样式 > 继承的样式
特指度的计算:
特指度能够用一个公式 I-C-E 来计算,当中
I 是 ID
C 是 Class
E 是 Element
对于一个 CSS 规则,若选择符中有一个 id,则 I 的值 +1。若选择符中有一个 class ,则 C 的值 +1;若选择符中有一个 element,则 E 的值 +1。
最后。从 I 的值開始比較,比較的规则例如以下伪代码所看到的:
if(a.I > b.I){
a 的优先级高
}
else if(a.I < b.I){
b 的优先级高
}
else{
if(a.C > b.C){
a 的优先级高
}
else if(a.C < b.C){
b 的优先级高
}
else{
if(a.E > b.E){
a 的优先级高
}
else if(a.E < b.E){
b 的优先级高
}
else{
if(a 先于 b 出现){
b 的优先级高
}
else{
a 的优先级高
}
}
}
}
比如:
<div id="redText">
<p>red</p>
<p id="greenText">green</p>
</div>
<style>
#redText p{
color: red;
}
#greenText{
color: green;
}
</style>
如上样例所看到的。尽管 greenText 的设置是在后面,但并没有覆盖前面的样式,最后的结果是两个文本都是红色的
我们计算一下两个样式的特指度:
1、#redText p 这个选择符中出现了一次 ID 和一次 Element,所以特指度是 1-0-1
2、#greenText 这个选择符中仅仅出现了一次 ID,所以特指度是 1-0-0
所以第一个的优先级高,不会被后者覆盖
CSS 优先级和特指度的更多相关文章
- 一篇文章带你初步了解—CSS特指度
CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...
- CSS学习(三)特指度和层叠
一.特指度 特制度的一般形式是0,0,0,0 行内样式,第一位的特指度加一 id选择符,第二位的特指度加一 类选择符.属性选择符.伪类,第三位的特指度加一 元素选择符.伪元素,第四位的特指度加一 特指 ...
- css选择器及css优先级
三个css选择器:id选择器#test1{ }.class选择器.test2{ }.标签选择器div{ }对三个div:<div>我是普通div</div>.<div i ...
- 关于CSS的优先级,CSS优先级计算
原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权 ...
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- css优先级和层叠
css优先级和层叠 1.优先级 计算方法: a.行内样式 b.id选择器的数量 c.类,伪类和属性选择器的数量 d.标签选择器和伪元素选择 ...
- 使用background和background-image对CSS优先级造成影响
在写一个关于背景图的CSS时候发现一个奇怪的现象, 原图: 如下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- CSS优先级算法是如何计算?
CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一 ...
随机推荐
- step1: python & scrapy安装
#首先安装python,这里安装python所需依赖包yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-dev ...
- MySQL重置root密码提示"Unknown column ‘password"的问题?
晚上打开MAC,发现root帐户突然不能正常登陆MySQL,于是打算重置密码,看了几篇文章,竟然重置不成功,总是得到Unknown column 'password'的错误,看了user的表结构也确实 ...
- C#基本语法 - .Net 4.0 之 Dynamic 动态类型
一..net4.0主要新特性 .Net4.0在.Net3.5基础上新增的主要特性有:可选参数.命名参数和Dynamic.具体请阅生鱼片的这篇博文.这里我们着重讲解C#4.0的Dynamic特性,对 ...
- 实现easyui的combogrid模糊查询框
这里用的方法是一个不可编辑的combogrid控件,覆盖上一个可输入的Input控件. 思路: 1.初始时取到后台查询出的列表,存储到全局变量 2.当输入框输入内容时,循环匹配列表,重新绑定到comb ...
- T-SQL语句创建表
USE E_Market --指定当前所操作的数据库 GO CREATE TABLE 表名 ( BID int identity (1,1)NOT NULL, BNAME varch ...
- .Net程序员玩转Android系列之三~快速上手
快速环境搭建和Hello World 第一步:JAVA SDK(JDK)的安装: 官方下载地址: http://www.oracle.com/technetwork/java/javase/downl ...
- Java - Latch和Barrier的区别
之所以把Latch与Barrier放在一起比较是因为他们给人一种相似的感觉. 他们都是阻塞一些行为直至某个事件发生,但Latch是等待某个事件发生,而Barrier是等待线程. 先比较一下JCIP中对 ...
- tomcat开启远程调试和热部署(jrebel)启动tomcat
@echo off set REBEL_HOME=D:\jrebel\jrebel--nosetup set JAVA_OPTS=-agentpath:%REBEL_HOME%\lib\jrebel6 ...
- Spring事务不起作用原因
首先声明: Checked异常继承java.lang.Exception类.Unchecked异常继承自java.lang.RuntimeException类. 而,Spring的事务实现采用基于AO ...
- 将一个数据库中表的数据导入另一个数据库(DB2)
将一个数据库中的数据导入另一个数据库(DB2) 我这里举得例子是使用的DB2数据库,其他数据库思路也是这样啦! 1.从db2 数据库中将表中的数据导入本地的excel中 export to d:\my ...