博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css中的声明冲突
阅读量:4354 次
发布时间:2019-06-07

本文共 860 字,大约阅读时间需要 2 分钟。

css中会出现一种非常常见的现象:声明冲突

而规则之间属性相同,值却不同,这就是声明冲突

冲突并不是一个错误,那如何解决冲突?

 

层叠机制用于处理声明冲突(浏览器会自动触发层叠机制)

层叠的过程:

一.比较优先级(优先级高的胜出,低的淘汰)

 一个声明的优先级与它的来源和重要性有关

来源(优先级的从低到高):

1.浏览器默认样式表中的声明

2.用户样式表中的普通声明

3.作者样式表中的普通声明

4.作者样式表中的重要声明

5.用户样式表中的重要声明

重要性:若属性值后跟上! important 就表示这是一条重要声明,反之则是普通声明。

 

若优先级相同,则比较特殊性

二.比较特殊性

每个声明都有一个权重(特殊性、特指度 Specificity Weight)

特殊性高的会被保留

一个声明的特殊性,取决于规则适用范围的大小

规则适用范围越大,特殊性越低

规则适用范围越小,特殊性越高

特殊性从高到低:行内样式——id选择器——类选择器——元素选择器——通配符选择器

在比较特殊性时,每个冲突的声明会生成四个数字分组(a、b、c、d)来比较特殊性

a越大,特殊性越高,若a相同,比较b...

a:若声明是行内样式,则为1,飞否则为0(<h1  style = "box">)

b:规则中ID选择器的个数(#)

c:规则中类选择器、伪类选择器、属性选择器的个数(类选择器: .    伪类::link   :hover  属性:input[type="text"])

d:规则中元素选择器、伪元素选择器的个数(伪元素选择器(以两个冒号开始)  例:.testselect::selection 例:i::before)

 

若特殊性相同,比较源次序

三.源次序

最后出现的声明胜出,其他的淘汰

该规则实际应用:

1.css reset代码前置

2.a元素的伪类书写顺序

复用:元素可以有多个class属性值,共用其中一个属性值放相同的样式

转载于:https://www.cnblogs.com/ohmyrose/p/8047859.html

你可能感兴趣的文章
Python在自动化运维时最常用的50个方法(转)
查看>>
Java 学习之路 之 泛型方法
查看>>
Test
查看>>
C# 整理
查看>>
AngularJS中使用$resource
查看>>
[poj3261]Milk Patterns(后缀数组)
查看>>
[luogu3369]普通平衡树(fhq-treap模板)
查看>>
题解 P2799 【国王的魔镜】
查看>>
写写代码,注意注意细节
查看>>
css Backgroud-clip (文字颜色渐变)
查看>>
安装 OpenSSL 工具
查看>>
用长微博工具发布长微博
查看>>
大庆金桥帆软报表案例
查看>>
方维分享系统,个人中心杂志社显示我的、关注的、推荐的数量
查看>>
JavaScript BOM加载事件
查看>>
Java复习总结——详细理解Java反射机制
查看>>
Navicat for MySQL10.1.7注册码
查看>>
Proxy模式
查看>>
读书多些会怎样
查看>>
浏览器好用的技术
查看>>