在读《深入CSS高级Web标准解决方案》时看到的,在此记录下来选择器的优先级
在做task0001的时候有一次写了下面的代码,先设置了一个全部的样式,再想设置个别的,一直没效果不知道哪里出了问题,以前一直以为#id{}就是最高优先级
#父标签ID .子标签类 {
//code
}
#子标签ID {
//code
//这个居然没有上面的优先级高
}
以下都是个人理解的说法
首先设置单个元素style="{}"的优先级最高,接下来是<style><style>中的选择器,最后是外部链接的选择器
先假设一个优先级变量为P=xyz=000
如果出现一个#ID名,则x+1,出现一个.类名则y+1,出现一个标签名则z+1,P值越高优先级越高,P相同的根据选择器在代码中出现的位置,越靠后越高
举几个栗子:
#header #banner #content {} // P=300
div#header div {} // P=102
div.container div {} // P=012
.container {} // P=010
div {} // P=001
上面的优先级由高到低
书比较老,没有写[property],[property="value"],:first-child等等,经过我的测试,它们的优先级相同,伪类,[property],[property="value"]的优先级应该相同(未测试所有伪类),都大于类这个级别,小于ID,大于多个标签,最后结果是等于标签名.类的级别,也就是y+1且z+1
p[name] span {
color: #777;
}
p[name="p1"] span {
color: #0f0
}
p:nth-child(1) span {
color: #44d;
}
p:first-child span {
color: #f00;
}
body>div>p>span {
color: #00f;
}
上面的前四个优先级相同,根据出现顺序,但优先级都高于最后一个
p:first-child span {
color: #f00;
}
.p span {
color: #00f;
}
这种情况下还是第一个优先级高
.p span {
color: #00f;
}
span:first-child {
color: #f00;
}
span.span {
color: #00f;
}
span:first-child {
color: #f00;
}
这种情况两种选择器优先级相同P=011
