|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
原文毗连:http://www.dudo.org/article.asp?id=252
即便在不太庞大的款式表中,也大概会有两个大概更多个划定规矩找到统一元素。CSS经由过程一个叫做层叠(cascade)的历程处置这类抵触。层叠给每一个划定规矩分派一个主要水平指数。作者界说的款式具有最高的主要性指数,其次是用户界说的款式。可是为了加强用户的把持才能,用户能够经由过程为任何划定规矩增添一个!important来进步它的主要性指数,让它的优先级高于任何划定规矩,乃至是比作者的!important还要高。
因而,层叠主要性指数的序次顺次为:
- 标志为!important的用户款式
- 标志为!important的作者款式
- 作者款式
- 用户款式
- 扫瞄器/用户代办署理的默许款式
为了盘算划定规矩的优先级,每品种型的选择符都有一个响应的数值,因为每一个选择器都由多少选择符构成,以是选择器的优先指数由选择符对应的数值相加而成,数值越高,优先级越高。CSS中的选择符有四类:
- 行内款式(InlineStyle),如<spanstyle="color:red">...</span>
- ID选择符(IDselectors),如#myid
- 类、属性选择符、伪类(Classes,attributesandpseudo-classes),如.class{...}、[href$=dudo.org]、:hover
- 元素(elements)、伪元素选择符(pseudo-elements),如p{...}、:first-line{...}
怎样来丈量呢?如前所述,它们每类都有分歧的数值暗示,个中:
行内款式为:1000
ID选择符为:0100
类选择符为:0010
元素款式为:0001
这里要指出的是,一切这些数值都不是10进制数字,1000只是代码它是一个行内款式,
比方,body#wrapp{...},那末它的优先级指数就是1+100+1=102,而bodydiv#wrapp{...}的优先级指数就是1+1+100+1=103。
再看一下别的的例子:
*{}0
li:first-line{}2(oneelement,onepseudo-element)
ulol+li{}3(threeelements)
ulolli.red{}13(oneclass,threeelements)
style=””1000(oneinlinestyling)
divp{}2(twoHTMLselectors)
divp.sith{}12(twoHTMLselectorsandaclassselector)
body#darkside.sithp{}112(HTMLselector,idselector,classselector,HTMLselector;1+100+10+1)
看这段代码:
- #wrap#content{color:blue;}
- #content{color:red;}
[code][/code]
- <divid="wrap">
- <divid="content">thisisatexthere</div>
- </div>
终极文本会显现甚么样的色彩呢?
是的,款式掩盖只会产生在具有不异优先级的情形下。这个例子中#wrap#content为200,而#content为100,纵使后设定color:red,也不会掩盖失落先前设定的color:blue;。别的,你能够为#content{color:red;}增添!important来看看效果。
以上都是在少于10个选择符的情形下,能够把这些数值看成十进制来利用和对照,可是,中选择符凌驾10个(固然大概性很小)又会怎样呢?我们参考一个Eric的例子:
- .hello{color:red;}/*specificity=10*/
- HTMLBODYDIVULLIOLLIULLIOLLIULLIOLLI{color:green;}
- /*specificity=15*/
这里的10并非“十”,它仅仅代表是一个烦选择符,以是的它的优先级仍然要比15个范例选择符构成的选择器要高。假如换成十六进制的话,就是这个模样
- .hello{color:red;}/*specificity=10*/
- HTMLBODYDIVULLIOLLIULLIOLLIULLIOLLI{color:green;}
- /*specificity=15*/
可是成绩,假如你再增加两个元素,就又酿成了11了,仍是呈现后面的情形。不外你应当一直记得,即便数值“看起来”对照年夜,它们的排序起首依照范例优先级来决意。
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 |
|