前端一HTML:十五: 权重的比较
生活随笔
收集整理的这篇文章主要介绍了
前端一HTML:十五: 权重的比较
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
如果选择器混合使用,那么如何确定我们的优先级?
通过权重进行比较. 那么如何计算权重呢? 通过数标签来计算。 先数id选择器的个数,再数类选择器的个数,最后数标签选择器的个数.
id选择器个数不相等,那么个数多的权重就大,如果个数相等就比较类选择器个数是否相等(个数多的, 权重就大)，最后比较标签选择器个数是否相等(个数多的, 权重就大).
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1个id选择器, 1个类选择器 1个标签选择器*/color: pink;}#father .son .grandson{ /* 1个id选择器, 2个类选择器 通过比较, 此混合选择器权重最大 */font-style: italic;color:blue;}#grandson{ /* 1个id选择器 */color:red;}</style> </head> <body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div> </body> </html>
注意:
比较权重的时候一定要注意,我们的选择器一定要命中对应的选择器才可能让标签拥有对应的属性.
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father .son div{ /* 1个id选择器, 1个类选择器 1个标签选择器*/color: pink;}#father .son { /* 1个id选择器, 2个类选择器 但是没有直接命中 "abcdefg" */font-style: italic;color:blue;}.father .son .grandson{ /* 0个id选择器, 3个类选择器 */color:red;}</style> </head> <body><div class="father" id="father"><div class="son" id="son"><div class="grandson" id="grandson">abcdefg</div></div></div> </body> </html>
总结
以上是生活随笔为你收集整理的前端一HTML:十五: 权重的比较的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 前端一HTML:十四: importan
- 下一篇： 前端一HTML:十五: 层叠,权重,优先