css-选择器-优先级
<!DOCTYPE html>
CSS选择器优先级
相同优先级下，位置在文档后面的覆盖前面的
不同优先级下，越能具体描述元素的css选择器，优先级越高
具体情况：
HTML元素继承父级元素的CSS属性 优先级 -100
浏览器赋予HTML元素的默认CSS属性 优先级 -10
星号选择器 优先级 0
*{background:#f00;}
类型(标签)选择器 优先级 1
div{background:#0f0;}
类名和伪类选择器 优先级 10
.aaa{background:#00f;}
id选择器 优先级 100
#bbb{background:#ff0;}
HTML行内样式 优先级 1000
<div style="background:#0f0;">行内样式优先级1000</div>
!important 优先级 10000
div{background:#0f0 !important;}
<!--
<style>
#b1{color:#ff0;}
.a1{color:#00f;}
div{color:#0f0 !important;}
*{color:#f00;}
</style>
<div class="a1" id="b1" style="color:#0ff;">你好我是div1</div>
<span>你好我是span2<span>
<p>
pppppppppp
<span>ssssssssssss</span>
<a href="###">aaaaaaaa</a>
</p>
<a href="###">aaaaaaaa</a>
-->
组合优先级：
<style>
#wai, .nei, span, a{color:#f00;} /*优先级每个独立*/
#wai a{color:#ff0;} /*101*/
div p span a{color:#00f;} /*4*/
div .nei span a{color:#0ff;} /*13*/
</style>
<div id="wai">
ddddddddddddd
<p class="nei">
pppppppppp
<span>
ssssssssssss
<a href="###">aaaaaaa</a>
</span>
</p>
</div>
<a href="###">bbbbbbbb</a>
css-选择器-优先级的更多相关文章
- 关于Css选择器优先级
今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...
- 深入理解CSS选择器优先级
题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...
- CSS选择器优先级（转）
原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...
- day44:CSS选择器优先级&JS基础
目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...
- 看完就懂--CSS选择器优先级的计算
CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 深入理解CSS选择器优先级的计算
选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...
- 导航栏布局时遇到的问题以及解决办法 css选择器优先级
得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- 一步步启动linux
可以一步一步启动linux. 在Ubantu刚一启动时,按c健即进入Grub>提示符状态,在此状态下输入(我用的是Ubuntu 13) grub>linux /vmlinuz grub&g ...
- 解决VS2008闪退的问题
问题:打开VS2008项目后,应该是加载完所有文件,立即断掉了IDE,查看事件器,发现图片中的错误描述,google了很久没有找到解决方案,后来还是自己动手解决这个问题花了一早上的时间,哎,只要把工程 ...
- JQuery原理介绍及学习方法
前言 对于JQuery,想必大家都很熟悉.目前,很多web项目,在实施的过程中,考虑到各浏览器原生JS API的兼容性,大都会选用JQuery或类似于JQuery这样的框架来进行网页效果开发.JQue ...
- java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点
1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...
- js formatString 格式化字符串
/* 函数:格式化字符串 参数:str:字符串模板: data:数据 调用方式:formatString("api/values/{id}/{name}",{id:101,name ...
- 关于 HRESULT:0x80070
异常来自 HRESULT:0x80070057 (E_INVALIDARG) 网上看的普遍办法是: 解决方法 是 删除 C:/WINDOWS/Microsoft.NET/Framework/v2.0. ...
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
[Mugeda HTML5技术教程] 开篇: HTML5 - 生存,还是毁灭 摘要:HTML5并不试图解决所有问题.但是在很多适合的场合,HTML5是不二选择. To be, or not to be ...
- 关于把A表中的数据复制到B表中。
最近公司需要把sql中的数据给整理出来,这就牵涉到数据转移问题. 我平时是很少接触sql这一块的.所以碰到这个问题甚是伤脑筋. 不过还好,这问题并不像我想象中的那么的困难. 以前做过把数据插入到临时表 ...
- MySQL锁等待分析【2】
MySQL锁等待分析[1]中对锁等待的分析是一步一步来的.虽然最后是分析出来了,可是用时是比较长的:理清各个表之间的关系后,得到如下SQL语句,方便以后使用 select block_trx.trx_ ...
- loadView/viewDidLoad/initWithNibName/awakeFromNib/initWithCoder的用法总结
loadView/viewDidLoad/initWithNibName/awakeFromNib/initWithCoder的用法总结 首先,区别程序化初始viewcontroller,半程序化 ...