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设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
随机推荐
- border-radius的用法与技巧总结
border-radius属性用法重点罗列 border-radius: none | <length>{1,4} [/<length>{1,4}] ? .如果存在反斜杠/,则 ...
- SVN 密码破解，svn密码本地找回 忘记密码
svn 密码被保存在本地文件中 C:\Users\[your computer name]\AppData\Roaming\Subversion\auth\svn.simple 文件下. 加密保存 到 ...
- Swift - guard关键字(守护)
guard语句和if语句有点类似,都是根据其关键字之后的表达式的布尔值决定下一步执行什么.但与if语句不同的是,guard语句只会有一个代码块,不像if语句可以if else多个代码块. 那么guar ...
- 通俗理解angularjs中的$apply，$digest，$watch
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- uva 11536 - Smallest Sub-Array
题目大意:按照题目中的要求构造出一个序列,找出最短的子序列,包含1~k. 解题思路:先根据题目的方法构造出序列,然后用Towpointer的方法,用v[i]来记录当前[l, r]中有几个i:当r移动时 ...
- 讨论一下PHP相关技能的层次
1.PHP编程能力 由于PHP的入门较为简单,所以暂时只有熟悉和精通两个级别. 1.熟悉PHP:精通PHP语法,掌握常用的函数,熟悉PHP5下的OOP应用,这个是基础,也没什么好说的. 2.精通PHP ...
- C++11 in Qt5
本文转载自:http://woboq.com/blog/cpp11-in-qt5.html C++11 in Qt5 Posted by Olivier Goffart on 11 June 20 ...
- 函数call相关[ASM]
前言: __cdecl:C/C++函数默认调用约定,参数依次从右向左传递,并压入堆栈,最后由调用函数清空堆栈,这种方式适用于传递参数个数可变的被调用函数,只有被调用函数才知道它传递了多少个参数给被 ...
- Android中实现全屏、无标题栏的两种办法（另附Android系统自带样式的解释）
在进行UI设计时,我们经常需要将屏幕设置成无标题栏或者全屏.要实现起来也非常简单,主要有两种方法:配置xml文件和编写代码设置. 1.在xml文件中进行配置 在项目的清单文件AndroidManife ...
- 如何做Gibbs采样(how to do gibbs-sampling)
原文地址:<如何做Gibbs采样(how to do gibbs-sampling)> 随机模拟 随机模拟(或者统计模拟)方法最早有数学家乌拉姆提出,又称做蒙特卡洛方法.蒙特卡洛是一个著名 ...