<!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-选择器-优先级的更多相关文章

  1. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  4. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  5. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. 关于一个下载的源代码中的”*.vssscc“文件的问题

    今天下载了一份程序的源代码,老是提示我要连接源代码管理服务器,这个……你的账号密码我怎么知道,有木有.于是上网搜罗了一番找来了解决方案,在这里分享给可能出现同样问题的童鞋. 首先说明一下什么是vsss ...

  2. arraylist的使用

    ArraylistDemo package cn.stat.p6.arraylist.demo; import java.util.ArrayList; import java.util.Iterat ...

  3. JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    1. JSON.parse(jsonString): 在一个字符串中解析出JSON对象 var str = '[{"href":"baidu.com",&quo ...

  4. 你好，C++（6）2.3 C++兵器谱

    2.3  C++兵器谱 正所谓“工欲善其事,必先利其器”,而要想做好C++程序设计,自然也离不开几件像样的兵器.下面我们就来看看C++兵器谱上有哪些神兵利器值得我们学习掌握.排在兵器谱上首要位置的就是 ...

  5. CentOS 7 之安装篇

    程序员是一个学到老的行业,因为新换一个公司,感觉也轻松了好多,自己想想还是多学一些知识吧,中国政府都要强制以每年15%的比例使用国产系统,相信Linux还是有必要学习的.因为曾经在文思做Expedia ...

  6. PHP扩展开发（3）-config.m4

    1. 宏命令 1.1. dnl 注释      1.2. 扩展的工作方式           1.2.1) PHP_ARG_WITH不需要第三方库           1.2.2) PHP_ARG_E ...

  7. DESTOON系统文章模块默认设置第一张图片为标题图的方法

    连上FTP或者其他方法打开网站目录下的\module\article\admin\template\edit.tpl.php修改设置内容第 <input name="post[thum ...

  8. Python中unittest采用不同的参数组合产生独立的test case

    我们在使用Python的unittest做自动化或者单元测试时,有时需要一个测试用例根据不同的输入.输出组合而执行多次,但是,unittest中一个用例只能有一组参数组合执行,如果采用循环的方式,在生 ...

  9. IIC 概述之2

    一.协议 1.空闲状态 I2C总线总线的SDA和SCL两条信号线同时处于高电平时,规定为总线的空闲状态.此时各个器件的输出级场效应管均处在截止状态,即释放总线,由两条信号线各自的上拉电阻把电平拉高. ...

  10. NET Core依赖注入解读&使用Autofac替代实现

    NET Core依赖注入解读&使用Autofac替代实现 标签: 依赖注入 Autofac ASPNETCore ASP.NET Core依赖注入解读&使用Autofac替代实现 1. ...