网站开发培训培训班,影视网站怎么做优化,免费学校网站系统,网站怎么接入百度地图很经典的文章啊 [转]CSS的优先级特性Specificity 如果同个元素有两个或以上冲突的CSS规则#xff0c;浏览器有一些基本的规则来决定哪一个非常特殊而胜出。它可能不像其它那么重要#xff0c;大部分案例你不需要担心冲突#xff0c;但大型而且复杂的CSS文件#xff0c;或有… 很经典的文章啊 [转]CSS的优先级特性Specificity 如果同个元素有两个或以上冲突的CSS规则浏览器有一些基本的规则来决定哪一个非常特殊而胜出。它可能不像其它那么重要大部分案例你不需要担心冲突但大型而且复杂的CSS文件或有很多CSS文件组成的可能产生冲突。 选择器一样的情况下后面的会覆盖前面的属性。比如 p { color: red; } p { color: blue; } p元素的元素将是蓝色因为遵循后面的规则。然而你不可能经常用相同的选择器冲突达到目的当你使用嵌套选择器合理的冲突来了。比如 div p { color: red; } p { color: blue; } 也许你看起来p元素在div元素里面的颜色是蓝色就像后面p元素的规则但是第一个选择器的特性却是红色。基本上一个选择器越多特性样式冲突的时候将显示它的样式。一组嵌套选择器的实际特性可以计算出来。基本的使用ID选择器的值是100使用class选择器的值是10每个html选择器的值是1。它们加起来就可以计算出特性的值。 p的特性是1 一个html选择器 div p的特性是2 两个html选择器 .tree的特性是10 1个class选择器 div p.tree的特性是111012 两个html选择器一个class选择器 #baobab的特性是100 1个ID选择器 body #content .alternative p的特性是112 两个html选择器一个ID选择器一个类选择器 按照上面的规则div p.tree的特性比div p高body #content .alternative p又比它们两个都高。 css优先级的四大原则 原则一 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高。 例子1 CODE: style typetext/css !-- *{font-size:20px} .class3{ font-size: 12px; } -- /style span classclass3我是多大字号/span 运行结果.class3{ font-size: 12px; } 例子2 CODE: style typetext/css !-- #id1 #id2{font-size:20px} .class3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 运行结果.class3{ font-size: 12px; } 注意后面的几大原则都是建立在“指定”的基础上的。 原则二 #ID .class 标签选择符 例子 CODE: style typetext/css !-- #id3 { font-size: 25px; } .class3{ font-size: 18px; } span{font-size:12px} -- /style span idid3 classclass3我是多大字号/span 运行结果#id3 { font-size: 25px; } 原则三越具体越强大。 解释当对某个元素的CSS选择符样式定义的越具体层级越明确该定义的优先级就越高。 CODE: style typetext/css !-- .class1 .class2 .class3{font-size: 25px;} .class2 .class3{font-size:18px} .class3 { font-size: 12px; } -- /style div classclass1 p classclass2 span classclass3我是多大字号/span /p /div 运行结果.class1 .class2 .class3{font-size: 25px;} 原则四标签#id #id ; 标签.class .class 上面这条原则大家应该也都知道看例子 CODE: style typetext/css !-- span#id3{font-size:18px} #id3{font-size:12px} span.class3{font-size:18px} .class3{font-size:12px} -- /style span idid3我是多大字号/span span classclass3我是多大字号/span 运行结果span#id3{font-size:18px} | span.class3{font-size:18px} 很多人会有这样的疑问为什么不把这个原则四归入原则一形成 【 标签#ID #ID 标签.class .class 标签选择符 通配符 】 呢或者将 “标签.class” 看作多更为具体的 “.class” 从而归入原则二呢后面我将解答各位的疑惑这就涉及到CSS的解析规律---------这四大原则间也是有优先级的是不是有些糊涂了别急继续 看。 *四大原则的权重 相信很多人都知道上面的四大原则不要以为知道了这四大原则就能分辨css中那条代码是起作用的不信那你5秒内能肯定的知道下面这段代码测试中的文字的字号吗 CODE: style typetext/css !-- .class1 p#id2 .class3{font-size:25px} div .class2 span#id3{font-size:18px} #id1 .class3{font-size:14px} .class1 #id2 .class3{font-size:12px} #id1 #id2{font-size:10px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 为了大家方便阅读我去掉了一些代码。 四大原则的权重就是: 原则一 原则二 原则三 原则四 解释 首先遵循原则一 有指定开始使用下面的原则无指定则继承离他最近的定义。 然后开始原则二 1、比较最高优先级的选择符 例子 CODE: style typetext/css !-- #id3{font-size:18px} .class1 .class2 .class3{font-size:12px} /* 描述的再具体也不起作用 --- 原则二 */ .class3{font-size:18px} div p span{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 运行结果#id3{font-size:18px} 删掉上面CSS中的前两行可以得出如果没有最高级别的#ID会寻找.class 即使后面的CSS按照“原则二” 描述的再具体也无法突破原则一。 2、如果两条CSS的如果最高选择符优先级一样则比较他们的数量 例子 CODE: style typetext/css !-- .class1 #id3{font-size:12px} .class1 .class2 #id3{font-size:14px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 运行结果:.class1 .class2 #id3{font-size:14px} 3、如果最高选择符级别和数量都一样则按照原则二比较他们下一级以此类推。 例子1 CODE: style typetext/css !-- #id1 .class2 .class3{font-size:14px} div .class2 #id3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p [colorOrange] 运行结果:#id1 .class2 .class3{font-size:14px} [/color] *最高级选择符的位置没有高下之分论证 [code]CODE: style typetext/css !-- #id1 .class2 .class3{font-size:18px} .class1 #id2 .class3{font-size:14px} .class1 .class2 #id3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 上例中更换3条CSS的先后可以得出哪条位于最后哪条起作用。说明他们的级别一样后面的将覆盖前面的。 *将原则四归入原则二的不合理性论证 CODE: style typetext/css !-- .class1 span#id3{font-size:14px} #id1 .class2 .class3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div #id1 .class2 .class3{font-size:12px} 可以看到span#id3并不比#id1高出一个级别。 无结果开始原则三 如果比较结果选择符从最高级开始都对应级别上的数量也相同则开始比较谁更具体。 例子 CODE: style typetext/css !-- #id1 .class2 span{font-size:14px} .class1 #id3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div #id1 .class2 span{font-size:14px} 当然也可以理解为在原则二层层比较中“少一个层级的样式”缺少的那个层级没有“层级较多的样式”多出的那个层级的级别高。绕口令 *将原则四归入原则三的不合理性论证 CODE: style typetext/css !-- .class2 .class3{font-size:14px} span.class3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div 上例中可以看出如果将原则四并入原则三将span.class3看作两层那么应该和.class2 .class3层级一样多那么应该显示12px,而事实不是这样。 最终对决原则四 如果还分不出结果则开始原则四的比较 例子1 CODE: style typetext/css !-- .class1 p.class2 .class3{font-size:14px} .class1 .class2 .class3{font-size:12px} -- /style div idid1 classclass1 p idid2 classclass2 span idid3 classclass3我是多大字号/span /p /div .class1 p.class2 .class3{font-size:14px}
