今天练习css的时候，重叠后的style发现不起作用，原来css选择器优先级大有文章。

声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用，毕竟自己理解的才是自己的。

三种基本的选择器
◆标签名选择器，如：p{}，h3{}   直接使用HTML标签作为选择器。
◆类选择器，如.className{}。
◆ID选择器，如#tab1{}。

扩展选择器
◆后代选择器，如.polaris span img{}     空格间隔，最终指向img的样式设定
◆群组选择器，如div,span,img{}            共同设定三个标签的样式，这样写省代码

选择器的优先级别
通常用1表示      标签名  选择器的优先级
      用10表示    类        选择器的优先级
      用100标示  ID        选择器的优先级
      用1000标示   标签内引入的style

关于Css选择器优先级的更多相关文章

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

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

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

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

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

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

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

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

  5. CSS选择器优先级总结

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

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

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

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

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

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

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

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

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

随机推荐

  1. 开发过程中常用的Linux命令

    做Java开发好几年了,部署JavaWeb到服务器上,一般都选择Linux,Linux作为服务器真是不二之选,高性能,只要熟悉Linux,操作快捷,效率很高. 总结一下工作中常用的Linux命令备忘: ...

  2. Codeforces Round #215 (Div. 2) B. Sereja and Suffixes map

    B. Sereja and Suffixes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...

  3. 大话设计模式C++实现-第22章-桥接模式

    一.UML图 二.概念 桥接模式(Bridge):将抽象部分与它的实现部分分离,使他们都能够独立地变化. 三.说明 为什么叫"桥接模式"? 如上所看到的的UML图中,有一个聚合线, ...

  4. Linux的内存回收和交换

    Linux的内存回收和交换 版权声明: 本文章内容在非商业使用前提下可无需授权任意转载.发布. 转载.发布请务必注明作者和其微博.微信公众号地址,以便读者询问问题和甄误反馈,共同进步. 微博ID:or ...

  5. Android操作系统服务（Context.getSystemService() ）

    getSystemService是Android很重要的一个API,它是Activity的一个方法,根据传入的NAME来取得对应的Object,然后转换成相应的服务对象.下面介绍系统相应的服务: 传入 ...

  6. FMDB 二次封装工具类，让你快速学会封装，集成数据库

    来源:StrivEver 链接:http://www.jianshu.com/p/4c77aee0b41c 上个版本为了增加用户体验,部分页面集成了离线缓存数据功能,于是就在项目里使用了数据库管理离线 ...

  7. WEB免费打印控件推荐

    在WEB系统中,打印的确是个烦人的问题. 要么自己开发打印控件,如果项目时间紧,肯定来不及. 要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1.2W之间,这就麻烦了. 前段时间有机 ...

  8. C#面向对象（三）接口实现多态

    一.如何用接口实现多态? 1.定义一个接口. using System; using System.Collections.Generic; using System.Linq; using Syst ...

  9. GOF设计模式之1：单例设计模式

    1.单例设计模式核心作用: 保证一个类只有一个实例,并且提供了访问该实例的全局访问点 2.常见应用场景: window的任务管理器 项目中读取配置文件一般也是一个单例模式 数据库连接池的设计也是采用单 ...

  10. [JavaEE] Eclipse中web-inf和meta-inf文件夹的信息

    WEB-INF    /WEB-INF/web.xml        你的Web应用程序配置文件,这是一个XML文件,其中描述了 servlet 和其他的应用组件配置及命名规则:    /WEB- I ...