CSS样式选择器优先级计算方式

关于CSS内容,由于细节上和实际应用上的内容较多,我觉得可以写的东西就比较多了,接下来较长的一段时间我想我的笔记都会以此为主。

作为CSS这一部分的第一篇内容,我想简单的谈一谈CSS样式的选择器的优先级计算方式。

在具体的页面设计中,当我们的页面内容逐渐丰富的时候,我们必然面临样式冲突的问题,其实有较为简单的解决方式就是使用较为单一的选择器。例如我们可以选择只是标签选择器和类选择器,这样也能极大的规避样式的冲突。但这种方法的缺点也同样明显,他会限制我们的选择(毕竟大多数时候我们需要更为多样的区分方式),这会让我们的设计变得极为僵硬(僵硬也就意味着更多的代码、更多的逻辑关系,我小叮当觉得不行!),甚至有点功能会难以实现。

故在面临这类问题时我觉得我们老老实实做人学会官方的优先级计算方式并且灵活运用是最简单的解决方案(我开始想的是最优的解决方案,但想到自身的水平有限,可能会存在更好的方案,出于严谨考虑这里还是写了最简单的)。

前面说了这么多其实大多是废话,只是为了展现下我的心路历程(一下子接受不了吧!?)

接下来是重点,我将简单直接的给出优先级的易用公式:

行内样式  >  ID >  类  =  伪类  >  标签  >  同样(*)

上面的只是简单的比较,下面则是对应的优先级计算中的数值:

1000 , 100 , 10 , 1  , 最小(我也不知道这是多少,只记得是最下,大部分计算中可以当做不存在吧)

而本文的关键就在于记住上面的那个比较公式,我相信对于大多数人来说并不存在难度,然后上面的5个档次对应下面的5个数字去计算就行了,这样一看是不是就明显简单了很多?掌握了这个方法相信优先级计算这种问题对大家来说都是小场面了!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,086评论 1 45
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 5,826评论 0 5
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,429评论 2 66
  • 大雨过后的清晨,城市的街道还有积水,地面还很冰凉,我还在我的睡梦中,梦见了我的妈妈和其他的四位姐姐哥哥,我...
    起新阅读 1,748评论 0 0