Heim > Artikel > Web-Frontend > css-选择器的特殊性_html/css_WEB-ITnose
css-选择器的特殊性_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:35936Durchsuche
特殊性这点吃了亏，是该梳理一下了~
先说一下大概的选择器，沾代码
最权威的还是《css权威指南》
我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
l 第一等：代表内联样式，如: style=””，权值为1000。
l 第二等：代表ID选择器，如：#content，权值为100。
l 第三等：代表类，伪类和属性选择器，如.content，权值为10。
l 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
栗子来了
<html>#content div#main-content h2{color:red; }/*=2*100+2*1=202*/#content #main-content>h2{color:blue }/*=2*100+1=201*/body #content div[id="main-content"] h2{color:green; }/*=1*100+1*10+3*1=113*/#main-content div.paragraph h2{color:orange; }/*=1*100+1*10+2*1=112*/#main-content [class="paragraph"] h2{color:yellow; }/*=1*100+1*10+1*1=111*/div#main-content div.paragraph h2.first{color:pink;}/*=1*100+2*10+3*1=123*/</html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：强大的CSS3动画库animate.css_html/css_WEB-ITnoseNächster Artikel：HTML调用QQ服务，在线QQ交谈_html/css_WEB-ITnose