p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
我的理解:
p span.warning{color:purple;} 第一个空格表是后代选择器,而span.warning{}是表示span定义的class=warning,精确定位span元素采用的类选择器。<span class="warning"></span>
p span .warning{color:purple;} 同理,因为warning为span的子元素,且class为warning 采用的后代选择器<span><a class="warning"></a></span>
第一种中的span和warning 为同级关系,第二种中的warning为span的子元素
标签的权值为1 类选择器的权值为10,id选择器的权值为100,p 和span是标签。warning和note是类选择器。footer是id选择器,在css设置中,当选择有冲突的时候,会选择权值高的。比如.warning{color:pink;}这个权值只是10,而p span.warning{color:purple;}权值是12,所以网页显示的颜色是purple而不是pink;下面那句话是一样的道理。
权值大小,表示同时对p标签设置颜色,有限使用那个颜色