css基本专业知识之挑选器应用示例

日期:2021-03-07 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

在撰写CSS编码的情况下,大家会出現好几个款式标准功效于用1个元素的状况,比如


拷贝编码
编码以下:

header>
<nav class="nav-main" id="navigation">Here background</nav>
</header>
header nav {
background-color: red;
}#navigation { background-color: green;}</p> <p>.nav-main {
background-color: blue;
}

以上3个款式标准都会功效于 ID 值为 "navigation" 的 nav 标识,最后哪一个款式标准会起效呢,这取决于挑选器的独特性(或优先选择级)高矮,挑选器独特性高的款式会遮盖独特性低的款式,历经检测 nav 标识的情况会显示信息为 green 翠绿色。

那末挑选器独特性是怎样测算的呢?

一般,大家应用4个以逗号隔开的数据来表明独特性,例如:

1.每一个元素挑选器奉献独特性为 0,0,0,1;
2.每一个类、伪类或特性挑选器的独特性为 0,0,1,0;
3.每一个ID挑选器的独特性为 0,1,0,0.
测算1个组成挑选器的独特性的情况下就先测算各种各样挑选器的数量和对应的独特性再相加,例如


拷贝编码
编码以下:

div ul ul li /* 0,0,0,4 4个元素挑选器 */</p> <p>div.aside ul li /* 0,0,1,3 1个类挑选器,3个元素挑选器 */</p> <p>a:hover /* 0,0,1,1 1个伪类挑选器,1个元素挑选器 */</p> <p>div.navlinks a:hover /* 0,0,2,2 1个类挑选器,1个伪类挑选器,2个元素挑选器 */</p> <p>#title em /* 0,1,0,1 1个 ID 挑选器,1个元素挑选器 */</p> <p>h1#title em /* 0,1,0,2 1个 ID 挑选器,2个元素挑选器 */</p> <p>* /* 0,0,0,0 1个通用性挑选器 */

注:多类挑选器有是多少个类就测算是多少个类,不适用多类挑选器的 IE6 会了解为1个类

较为挑选器独特性高矮立即从左向右先后较为,数据大的则优先选择级更高,假如同样就较为下1位,全部位都同样则优先选择级是1样高,入选择器优先选择级1样高的情况下后声明的款式会遮盖前面声明的款式

每一个级別的优先选择级值是互相单独的,13个元素挑选器写在1堆也不容易比1个类挑选器的独特性高

第1个0是用于行内款式的,且仅用于行内款式

拷贝编码
编码以下:

<nav style="background-color: gray;"></nav> <!-- 1,0,0,0 -->

有1样物品能够疏忽独特性,那便是 !important。应用 !important 能够把任何款式标准标识为关键

拷贝编码
编码以下:

.nav-main {
background-color: blue !important;
color: #666;
}

基础上,任何关键的款式标准都可以以遮盖沒有标识为关键的款式标准,


拷贝编码
编码以下:

<div id="gohome"><a href="/" id="home">Home</a></div>
div#gohome a#home {
color: red;
}</p> <p>div a {
color: green !important;
}

上面的编码会获得1个翠绿色 green 的连接,第1个标准有十分高的独特性(0,2,0,2),

可是在 !important 眼前1样没用,除非大家给第1个标准也标识为关键


拷贝编码
编码以下:

div#gohome a#home {
color: red !important;
}</p> <p>div a {
color: green !important;
}

这时候候连接就变成鲜红色 red 了,都标识为关键的状况下,则会应用前面提到的独特性标准来处理,

因此应用 !important 的情况下理应衡量,尽可能不必用

此外,IE6 是适用 !important 的,只是不彻底适用罢了,当在同1个挑选器中,在标识为关键的款式标准以后又再次界定了此款式则 !important 将无效

拷贝编码
编码以下:

.header {
color: red !important; /* 规范访问器 red */
color: green; /* IE6 green !important 无效 */
}

再有便是 IE6/7 能够容许在 !important 后边加上1些文本,仍然能鉴别

拷贝编码
编码以下:

.header {
color: red !important ie; /* ie6/7 red */
}

上一篇:2018瑞博企业新春佳节放假了通告 返回下一篇:没有了