前端学习 -- Css -- 选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定优先级高的优先显示。
优先级的规则
- 内联样式 ， 优先级 1000
- id选择器，优先级 100
- 类和伪类， 优先级 10
- 元素选择器，优先级 1
- 通配* ， 优先级 0
- 继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级是单独计算
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 -- 选择器的优先级的更多相关文章
- （转）css选择器及其优先级
文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...
- CSS选择器以及优先级与匹配原理
最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...
- 详解CSS选择器、优先级与匹配原理
原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...
- 转载：详解CSS选择器、优先级与匹配原
转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...
- CSS选择器、优先级和匹配原理
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- 详解CSS选择器、优先级与匹配原理【转】
作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- CSS 选择器及优先级
CSS 选择器及优先级 1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么 ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
随机推荐
- 20155320 Exp7 网络欺诈防范
20155320 Exp7 网络欺诈防范 [基础问题回答] (1)通常在什么场景下容易受到DNS spoof攻击 乱点链接或者连公共场合的免费WiFi也容易受到攻击,尤其是那种不需要输入密码直接就可以 ...
- 不成功的RMAN恢复到其他机器的例子
事实上,RMAN备份的时候,如果是使用control file 来作catalog,那么一定要把control file和spfile恢复到另外的机器上面. 否则,会出现类似如下的错误: 原来的实例: ...
- 微信小程序之缓存——不同页面传递数据
1. 添加缓存 单个密钥允许存储的最大数据长度为1MB,所有数据存储上限为10MB. // 存储信息到storage // 异步存储 set() { wx.setStorage({ key: 'use ...
- okhttp3.4.1+retrofit2.1.0实现离线缓存
关于Retrofit+OkHttp的强大这里就不多说了,还没了解的同学可以自行去百度.这篇文章主要讲如何利用Retrofit+OkHttp来实现一个较为简单的缓存策略:即有网环境下我们请求数据时,如果 ...
- OpenCV学习资源库
整理了我所了解的有关OpenCV的学习笔记.原理分析.使用例程等相关的博文.排序不分先后,随机整理的.如果有好的资源,也欢迎介绍和分享. 1:OpenCV学习笔记 作者:CSDN数量:55篇博文网址: ...
- 深度学习目标检测综述推荐之 Xiaogang Wang ISBA 2015
一.INTRODUCTION部分 (1)先根据时间轴讲了历史 (2)常见的基础模型 (3)讲了深度学习的优势 那就是feature learning,而不用人工划分的feature engineeri ...
- EOS 权限管理之-权限的使用
首先,跟大家说声抱歉,由于之前一直在准备EOS上线的一些工作,所以,很长时间没有更新内容.今天正好有时间,也想到了一些题材,就来说一下这个话题.本文完全是个人见解,如有不当之处,欢迎指出. 前提回顾: ...
- 制作R中分词的字典的办法
在开始下面步骤之前先让自己的文件可以显示扩展名. 如何显示请谷歌. 第一步:打开一个文本文件 第二步:把你要的词复制到这个文本文件吧. 第三步:将这个文本文件的格式改为dic.即原来文件格式是txt后 ...
- RYU 灭龙战 fourth day （1）
RYU 灭龙战 fourth day (1) 前言 对于流量的监控,对于一个网络管理人员来说是非常重要的,可以从可视化的角度,方便检测出哪里的设备出了问题:而在传统网络中,如果是哪里的设备出了问题的话 ...
- Alpha 冲刺四
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 实现后端聊天接收,搜 ...