css---选择器的特殊性

时间 2019-11-17

标签 css 选择器特殊性栏目 CSS 繁體版

原文原文链接

特殊性这点吃了亏，是该梳理一下了~css

先说一下大概的选择器，沾代码html

最权威的仍是《css权威指南》spa

咱们把特殊性分为4个等级，每一个等级表明一类选择器，每一个等级的值为其所表明的选择器的个数乘以这一等级的权值，最后把全部等级的值相加得出选择器的特殊值。code

4个等级的定义以下：htm

l 第一等：表明内联样式，如: style=””，权值为1000。blog

l 第二等：表明ID选择器，如：#content，权值为100。it

l 第三等：表明类，伪类和属性选择器，如.content，权值为10。class

l 第四等：表明类型选择器和伪元素选择器，如div p，权值为1。css选择器

注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，因此他们的权值都为0。im

栗子来了

<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>

---------------------------------------------------------------------------------------------------------------------------

css选择器伪类

a:link{color：navy；}未访问的地址的全部锚。

a:visited{color：gray；}已访问的地址的全部锚。

a:hover{color：red；}指示鼠标停留在某个超连接上去。

a:active{color：yellow；}鼠标停留在一个超连接上，鼠标点击就会激活这个超连接。