关于css的id选择器优先级的问题

rjdyx 发布于 2016/09/13 11:14
阅读 230
收藏 0

html代码:

<div id="flag">
    <p>下载简历模板</p>
    <p>然后邮件到</p>
    <p id="email">123456@123.com</p>

</div>

css:

#flag p {
    font-size: 14px;
}

#email {
    font-size: 1px;
}

最终123456@123.com的font-size为14px。为什么会这样?不是很明白选择器的优先级,有哪位前端大神帮忙解答一下,感激不尽!!(css的书写顺序就是上面写的那样)

加载中
1
littledew
littledew

内联样式(<div style=)的权值1000;ID选择器(#开头)的权值为100;Class类选择器(.开头)的权值为10;HTML 标签选择器(div, P, span等)的权值为 1

#flag p  权值:100 + 1

#email    权值:100

最终样式选总权值最大的,所以为#flag p的样式

littledew
littledew
回复 @rjdyx : 对的哦
rjdyx
rjdyx
回复 @littledew : 也就是说情况都相同的时候看顺序,情况不同的时候先看里面是否有!important,没有(或都有)的话再看外面的选择器的权重是这样吗?
rjdyx
rjdyx
回复 @littledew : 哦哦,好神奇。这样的话input {color:red!important} input {color:green} 结果应该是red了吧?
littledew
littledew
回复 @rjdyx :比如: 1. input{color:red!important} input{color:green!important} //结果green 2. p input{color:red!important} //结果red input{color:green!important}
rjdyx
rjdyx
回复 @littledew : 如果!important权值无限大,两个地方用了这个!important的话,那么这时候应该就是看顺序了吧?
下一页
0
ajun_code
ajun_code

优先级:#flag + p > #email 

1.  内联样式表的权值最高 1000;

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1


返回顶部
顶部