全国服务热线:4008-888-888

公司新闻

CSS款式的优先选择级实行次序和遮盖标准

漂亮的网站离不了css款式的合理布局和装饰设计,那麼很多的css款式,他们的优先选择级实行次序和遮盖标准是啥呢?

CSS关键有三种引入方法:原素上的style、文档头顶的style原素、外界款式文档。这三种优先选择级排序次序为:原素上的style 文档头顶的style原素 外界款式文档。

在其中CSS款式还遵照以下优先选择级遮盖排序次序:

实例款式:

#navid { 
 height: 100%; 
 width: 200; 
 position: absolute; 
 left: 0; 
 border: solid 2 #EEE; 
.navclass { 
 border: solid 2 #AE0; 
1. 款式表的原素挑选器挑选越精准,则在其中的款式优先选择级越高:

id挑选器特定的款式 类挑选器特定的款式 原素种类挑选器特定的款式

因此上例中,#navid的款式优先选择级超过.navclass的优先选择级,立即.navclass是全新加上的,都不起功效。

2. 针对同样种类挑选器制订的款式,在款式表文档中,越靠后的优先选择级越高

留意,这儿是款式表文档中越靠后的优先选择级越高,而并不是在原素class出現的次序。例如.class2 在款式表格中出現在.class1以后:

.class1 { 
 color: black; 
.class2 { 
 color: red; 

而某一原素特定class时选用 这类方法特定,这时尽管class1在原素中特定时排到class2的后边,但由于在款式表文档中class1处在class2前边,这时依然是class2的优先选择级高些,color的特性为red,并非black。

3. 假如要让某一款式的优先选择级变高,可使用!important来特定:

.class1 { 
 color: black !important; 
.class2 { 
 color: red; 

这时class将应用black,并非red。

应用!important:强制性优先选择级

应用!important:能够强制性实行优先选择级次序,实例:

.current_block { 
 border: solid 2 #AE0 !important; 

之上便是CSS款式的优先选择级实行次序,及其在甚么状况下能遮盖前边的css款式。

申明:如需转截,并保存全文连接:


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服