CSS的特殊性 (specificity)
CSS的特殊性 (specificity)
CSS的特殊性是非常重要却又经常被忽视的属性,特别是在团队合作下的产品迭代开发中,因为不注重CSS的特殊性最后导致某些代码混乱不堪,这里就把自己对CSS特殊性的认识做一些归纳总结.
CSS的特殊性(specificity)也可以称为CSS的优先级或权值:对于每个样式表规则,浏览器都会计算选择器的特殊性,从而使元素属性声明在有冲突的情况下能够正确显示.
特殊性的描述可以把它看成一个4位数: 0.0.0.0 ,数值越大的特殊性越高(例如:0.1.0.0>0.0.1.2),也是最终浏览器显示的效果.
特殊性的具体特性:
内联样式的特殊性为 1.0.0.0
ID选择器的特殊性为 0.1.0.0
类或者伪类的特殊性为 0.0.1.0
元素和伪元素的特殊性为 0.0.0.1
简单的说就是:内联样式的特殊性>ID选择器>类或者伪类>元素和伪元素.
看几个例子:
<div style="backgroud:red">... /* 1.0.0.0 */
#iin1{ backgroud:blue;} /* 0.1.0.0 */
.iin2{ backgroud:green;} /* 0.0.1.0 */
如果这样写
a{ color:red;} /* 0.0.0.1 */
p a{ color:blue;} /* 0.0.0.2 */
p a.more{ color:green;} /* 0.0.1.2 */
根据特殊性规则:
<a href="#"></a> <a>为红色;
<p><a href="#"></a></p> <a>为蓝色;
<p><a href="#" class="more"></a></p> <a>为绿色;
连接符和通配符不具有特殊性
即特殊性为0.0.0.0; 例如下面两组例子,它们的的特殊性相同:
div p{ color:red;} /* 0.0.0.2 */
body * p{ color:blue} /* 0.0.0.2*/
ol>li{ color:red;} /* 0.0.0.2 */
ol li{ color:blue;} /* 0.0.0.2 */
那么遇到上面的情况浏览器该如何渲染呢? 浏览器会根据选择器出现的先后顺序来判断,后出现的选择器会把先出现的给覆盖掉,所以最后两组例子都会显示为蓝色.而且浏览器会将内部样式(即中的样式)的顺序判断为在外链样式之后,也就是说内部样式会覆盖掉外链样式中相同的属性定义.
继承同样不具有特殊性
例:
p{ color:blue;} /* 0.0.0.1 */
*{ color:red;} /* 0.0.0.0 */
虽然通配符*定义在p的后面,但最终
中的文字还是会显示为蓝色;值得注意的是继承的”不具有特殊性”不同于上面提到的连接符和通配符,它是连0都没有! 这又会给我们带来什么意外呢?看看下面的例子:
...
<style>
*{ color:red;}
</style><body>
<p>这里的文字<em>hello</em></p>
</body>
...
例子很好理解,因为通配符定义了所有元素,所以
和都是的红色(这里p,em特殊性为0.0.0.0).然后我们对例子做一点修改:
...
<style>
*{ color:red;}
.blue{ color:blue;}
</style><body>
<p class="blue">这里的文字<em>hello</em></p>
</body>
...
这里给<p>加了个blue的类,我们期望的是<p>里面的文字都变为蓝色,同时也想当然的认为<em>会继承<p>的blue类的蓝色,但事实却是:<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS的特殊性-iinterest</title>
<style type="text/css">
*{color: red;}
.blue{color:blue; }
</style>
</head>
<body>
<p class="blue">这里的文字<em>hello</em></p>
</body>
</html>
出现这种意外的原因就在于继承的特殊性连0都没有,而通配符的特殊性为0,所以通配符的样式被显示出来…
最后一个影响特殊性的声明:!important
例:
h1{ color:red!important;}
!important被称为重要声明,被标记为!important的属性其特殊性最高,当出现有冲突的重要声明时,同样安照出现的先后顺序决定最后的显示.
例:
h1{color:red!important;}
h1{color:blue!important;}
最后h1文字为蓝色
CSS的特殊性 (specificity)相关推荐
- SVG与CSS的特殊性
这几天在看CSS权威指南,之前看到了CSS的特殊性这一节.正好今天遇到了个相关问题:在SVG中使用样式. <text x="250" y="150" ...
- css元素特殊性及元素分类,详细解释。
一.元素特殊性 二.元素重要性 三.元素分类 今天来分别讲讲元素的特殊性,重要性以及元素的分类 1.元素的特殊性 特殊性描述了不同规则的相对权重,当多个规则应用到同一个元素时,权重越大的样式会优先显示 ...
- CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
- 【原创】CSSOO的思想及CSS框架的应用(未整理完)
CSSOO的思想及CSS框架的应用 前语:通过这次研究分析总结,个人对CSSOO的概念及应用的思路也更明确一些,是一个和大家共同学习的过程. 一.CSS框架 框架目的: 给出一个相对规范的开发方法,给 ...
- 【转】刨根究底CSS(2):CSS中的各种值——初始值,就是默认值吗?
先问个非常简单的问题,这个问题的答案,相信大部分Web开发人员都自认为显而易见,但却又多半会答错:CSS属性中的初始值(initial value),就是默认值(default value)吗? 难道 ...
- css参考手册css3手册_CSS手册:面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
- 每个前端都需要知道这些面向未来的CSS技术
写在前面 前端技术日新月异,我们需要不断学习来更新自己的前端知识并运用到自己的项目中.这次笔者整理一些未来普及或者现在同学们可能已经用到的CSS特性,包括SVG图标.滚动特性.CSS自定义属性.CSS ...
- 浏览器字体大小设置_CSS之 浏览器解析样式的过程
阅读本文约需要10分钟 大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务! 1.长期为你提供最优质的学习资源! 2.给你解决技术问题! 3.每天在朋友圈里分 ...
- css3常用技巧_您可能错过的5个CSS3技巧和窍门
css3常用技巧 Though, CSS3 isn't a complex language but you'll there are greater chances that you'll stum ...
- 极客日报:恶意软件感染超1000万台安卓设备;淘宝App已支持“云闪付”付款;OpenSSH 8.8发布
一分钟速览新闻点! OPPO在德国反诉诺基亚专利侵权 抖音支持外放音量过高提醒功能 淘宝App已支持"云闪付"付款 理想汽车称玻璃存在自动开裂可能性 阿里申请"阿里元宇宙 ...
最新文章
- 为什么你不应该自行更新 Drupal 网站?
- 专为物联网开发的开源操作系统Contiki(转)
- JS栈结构的简单封装
- java成员变量和局部变量的初始化和内存中的运行机制
- 聊城中考计算机试题及答案,初中微机模拟考试试题(word版).doc
- Leetcode 213. 打家劫舍 II (每日一题 20211009)
- MIMIC 以太坊医疗项目开发(6)Web3智能合约API
- css渲染(一) 字体
- NOIP2007 树网的核
- Golang Tips
- cent6.8 nginx php,CentOS 6.8 安装Nginx
- 为什么创业你只为少数人服务就够了?
- 产品研发过程管理专题——软件测试过程管理实践
- 四种电荷分布,点电荷,体电荷,面电荷,线电荷
- 《算法竞赛进阶指南》0.1位运算
- CS229 Lecture 12
- Structs2-Action
- php编程模块英文缩写_PHP版国家代码、缩写查询函数代码
- 区块链行业被攻击怎么办?
- 5G来临,我们该如何打造自己的家庭数据中心 - 基础篇
热门文章
- 人脑(科普类)书籍视屏学习资料推荐(不定时更新)
- Revealing ecosystem services relationships and their driving factors for five basins of Beijing (2)
- 全智通A+常见问题汇总解答—A+人脉关系中的新建权限取消掉后,保存权限,权限依然存在
- THUSC2019:Illusory World
- 如何判断网站被黑?网站被黑如何应对?如何防止网站被黑?
- 网站被黑(BUGKU)
- 聚米移动广告平台——广告主不可错过的投放选择
- macbook桌面的文件突然消失的解决方案
- 支付宝对账单和微信对账单下载保存数据库
- 千呼万唤始出来的CoordinatorLayout