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

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

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

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

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

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

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

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

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

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

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

你可能感兴趣的:(CSS样式选择器优先级计算方式)