CSS样式特殊性

Question

p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/请问这两个分别是什么选择器。。。还是我完全搞错了？

Answer 1

基础选择器有三种

1、标签选择器 用起来直接写标签名就行 权值较低 为1

你的栗子里 p span 就是标签选择

2、class选择器  在class名前加“.”来表示 权值适中 为10

你的栗子里 .warning .note 就是class选择器

3、ID选择器  在ID名前加“#” 来表示  权值较高 为100

你的栗子里 #footer 就是ID选择器

选择器是可以嵌套的，你的栗子中用到的是后代元素嵌套

父元素选择器+后代元素选择器

可以更细致选择所需元素  权值也更高 是所有选择器权值的和

你栗子里的p span.warning 就是三个选择器嵌套出来的，

父元素p标签选择器+后代元素span标签选择器+后代元素.warning class选择器

权值就是相应的选择器权值之和  1（p）+1（span）+10（warning） = 12

#footer .note p 同理  你可以自己算算权值是否是111

css选择器还有很多 像伪类选择器等   嵌套也是 还有子元素嵌套

有不懂的可以在慕课网http://www.imooc.com/learn/9 这里系统学习相关知识

以上

Answer 2

看最后一个得了，.warning和.note是类选择器，p span.warning这个可以直接写.warning，写完只是说明.warning是p span标签下的，这样写的目的是考虑优先级。