今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果。开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出来为啥,结果回家后用简单的代码打一遍,发现原来是个很简单的问题……动画出不来的原因就是:id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式,导致了动画出不来。简单代码测试:<!DOCTYPE html><html><...
1.行内样式>嵌入式>外部样式(就近原者)当外部样式在嵌入式的前面时就是外部样式为主2.重复样式p{color:red}p{color:green}<p>是green</p>3.id选择器和class选择器相同点都可一定义属性值不同点id选择器是唯一的只能定一个class可以定义多个相同类名例1<p class="a">我是类样是红色<span class="a">红色也有继承a也可以是相当于类属性</span></p><p id="a">错误<i id="a">不能在次定义</i></p>4.子选择器ul>li ul下的所有子元素u...
CSS样式优先级行内>内部>外部使用!important的css定义是拥有最高的优先级的。只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的。CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式。 IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性 .padding-l-r p span{ fon...
CSS三大特性—— 继承、 优先级和层叠继承:即子类元素继承父类的样式;优先级:是指不同类别样式的权重比较;层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_txt") 4.全局选择器(如:*号) 5.组合选择器(如:.head .head_logo) 6.后代选择器 (如:#head .nav ul li...
一、优先级简单可以理解为就近原则;<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: red;color: white;}.c2{font-size: 26px;color: black;}</style></head><body><div class="c1 c2" style="color: blue">abc</div></body></html>二、存在形式css样式可以存在于一个文件中;在HTML中引入即可;##HTML文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Ti...
一、前言 首先看看一道阿里这期网申的题目吧!1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before D. [type="checkbox"]:checked E. ul#shop-list 二、回顾选择器类型 html片段<body><div id="content"><div>Hello world</div><div cla...
1.选择器的优先级 !important>内联选择器(style)>id选择器>类选择器 | 属性选择器 | 伪类选择器 > 元素选择器>通配符(*)2.选择器的权重(通过权重计算可以避免许多问题)!important10000内联选择器1000id选择器100类选择器10元素选择器1 eg:body #sum{width:100px;} 结果:100+1=101。 ps:!important在某些时候会失效(当然能不用!imortant就不要用) eg:box{ width:100px!important; ...
参考博客: http://www.cnblogs.com/yuanchenqi/articles/6856399.html css属性选择器<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>/*.c1[po*="p"]{*//*color: red;*//*}*//*[po="p1 p"]{*//*color: green;*//*}*//*.c1{*//*color: red;*//*}*//*.btn{*//*font-size: 30px;*//*}*/</style></head><body><div po="p1 p" class="c1 btn">p1</div><!--这个class有两个值,即等于c1又等于btn...
详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。 最近看到篇对CSS优先级有比较好的解释的blog,虽然Webjxcom有相关的文章,但依然转载过来供大家学习参考。 详解CSS优先级的读法,CSS优先级包含四个级别(文内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数。根据这四个级别出现的次...
当一个标签拥有多重样式,根据以下规则渲染:1、相同权值情况下,CSS样式的优先级——就近原则(离被设置元素越近优先级别越高):内联样式>内部样式>外部样式2、权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式:继承0.1;标签1;类选择器10;id选择器100;!important为最高权值。原文:http://www.cnblogs.com/lulushow/p/6855642.html
CSS 选择器及优先级1.根据权值计算 div .class1 #people的权值等于1+10+100=111 .class2 li #age的权值等于10+1+100=111 2.权值相同,那么以后定义的为准。 3.一般在类选择器、属性选择器、伪类选择器优先级比较容易出错。 css3选择器主要有:基本选择器 , 层次选择器, 伪类选择器 , 伪元素选择器 , 属性选择器基本选择器 层次选择器 伪类选择器分为 动态伪类选择器, 目标伪类选择器, 语言伪类选择器, UI元...
CSS规则之间可以互相覆盖,这一点我们应该已经习以为常了。然而正是由于规则之间可以互相覆盖、子元素继承父元素的默认行为,导致了CSS冲突的问题。 碰到CSS冲突时,通常我们会加入一些更加详细的规则来明确如何显示,以此解决冲突。通常越详细的规则优先级会越高,但优先级究竟是如何定义的呢?
首先根据CSS定义位置来区别,优先级从低到高如下:浏览器默认样式(Browser Default Style)外部样式表内部样式表行内样式 (e.g., sty...
多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下:(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。 选择器的优先权--->权值内联样式---1000;ID选择器----100;class选择器---10;标签选择器-------1; CS...
CSS 的优先级是根据样式声明的特殊值来判断的。选择器的特殊值分为四个等级,如下:标签内选择符 x,0,0,0ID 选择符 0,x,0,0class 选择符/属性选择符/伪类选择符 0,0,x,0元素和伪元素选择符 0,0,0,x计算方法:每个等级的初始值为 0每个等级的叠加为选择器出现的次数相加不可进位,比如 0,99,99,99依次表示为:0,0,0,0每个等级计数之间没有关联等级判断从左向右,如果某一位数值相同,则判断下一位数值。如果两个优先级相同,则最后出...
层叠优先级是:浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其中样式表又有:类选择器 < 类派生选择器 < ID选择器 < ID派生选择器 派生选择器以前叫上下文选择器,所以完整的层叠优先级是:浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 ...