当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
优先级的规则

  1. 内联样式 ， 优先级 1000
  2. id选择器，优先级 100
  3. 类和伪类， 优先级 10
  4. 元素选择器，优先级 1
  5. 通配* ， 优先级 0
  6. 继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。

并集选择器的优先级是单独计算
div , p , #p1 , .hello{}

可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important

分别测试下这6种情况：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .p1 {

                background-color: yellow;

            }

            p {

                background-color: red;

            }

            * {

                font-size: 50px;

            }

            p {

                font-size: 30px;

            }

            #p2 {

                background-color: yellowgreen;

            }

            p#p2 {

                background-color: red;

            }

            .p3 {

                color: green;

            }

        </style>

    </head>

    <body>

        <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落

            <span>我是p标签中的span</span>

        </p>

    </body>

</html>

background-color:

p#p2 :继承的样式，没有优先级；

*p:通配* 优先级0；

p :元素选择器，优先级 1；

.p1:类和伪类， 优先级 10；

p2 优先级 100；

style="background-color: orange;"优先级1000；

因此背景颜色为 organge。

color：

p3:因为只有这一个设置color因此绿色。

前端学习 -- Css -- 选择器的优先级的更多相关文章

  1. （转）css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  2. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  3. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  4. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 详解CSS选择器、优先级与匹配原理【转】

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  7. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  8. CSS 选择器及优先级

    CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...

  9. 前端学习——css基础知识，选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

随机推荐

  1. 不成功的RMAN恢复到其他机器的例子

    事实上,RMAN备份的时候,如果是使用control file 来作catalog,那么一定要把control file和spfile恢复到另外的机器上面. 否则,会出现类似如下的错误: 原来的实例: ...

  2. 【第三课】Centos 7.x系统安装和网络配置以及远程密钥登录

    目录 一.安装CentOS 7.3 二.配置网络 1.使用dhclient命令自动获取ip地址 2.使用ip addr或ifconfig命令查看网卡信息 3.使用route命令查看路由信息 4.通过修 ...

  3. [CF1083F]The Fair Nut and Amusing Xor[差分+同余分类+根号分治+分块]

    题意 给定两个长度为 \(n\) 的序列 \(\{a_i\}\) 与 \(\{b_i\}\),你需要求出它们的相似度.,我们定义这两个序列的相似度为将其中一个序列转化为另一个序列所需的最小操作次数.一 ...

  4. java File读取文件始终不存在的问题分析

    先上图: 如图,f1 始终能读到该文件,使用的是绝对路径 f2 却是相对路径. 感觉很奇怪,明明一模一样的代码为什么会产生不同的结果呢? 首先想到的是是不是有什么特殊字符.. 拿到notepad++中 ...

  5. Java设计模式-建造者(Builder)模式

    目录 由来 使用 1. 定义抽象 Builder 2. 定义具体 Builder类 3. 定义具体 Director类 4. 测试 定义 文字定义 结构图 优点 举例 @ 最近在看Mybatis的源码 ...

  6. mongodb分片集群

    第一章 1.mongodb 分片集群解释和目的 一组Mongodb复制集,就是一组mongod进程,这些进程维护同一个数据集合.复制集提供了数据冗余和高等级的可靠性,这是生产部署的基础. 第二章 1. ...

  7. FME Cloud 账号申请流程

    第一步,访问SAFE的FME Cloud注册页,官网明确表态,如果你是一个新的FME Cloud用户,你可以免费获得一个初级版.地址:https://console.fmecloud.safe.com ...

  8. jenkins+maven+svn+npm自动发布部署实践

    一.系统版本centos7.6 二.根据jenkins官方安装方法yum安装jenkins 1.进入jenkins官网下载页面https://jenkins.io/download/,选择Red Ha ...

  9. saltstack-----master迁移篇

    打包/etc/salt/下的pki文件夹.发送到新的master,然后更改minion的hosts,重启minion,最后重启新master..搞定(salt "*" servic ...

  10. 【翻译】Brewer's CAP Theorem CAP定理

    Brewer's CAP Theorem 原文地址:http://www.julianbrowne.com/article/brewers-cap-theorem Brewer’s (CAP) The ...