why Love Hate

发表于: 2015-12-19分类于:CSS

why Love Hate

在介绍伪类选择器的时候,我们知道对于链接常常要使用下面这几个伪类选择器::link :visited :hover :active ,而且还会知道这四个伪类选择器需要按照次序来运用才行,为了记住这个次序人们就想出了 LoVe HAte这个词组。

但是为什么要按照这个次序呢?其中的道理何在呢?下面来尝试着说明一下:

不同选择器具有不同的特殊性,ID选择器为 0,1,0,0,而类选择器和属性选择器以及伪类选择器为 0,0,1,0,伪类元素和元素为0,0,0,1。上面的四个伪类选择器具有同样的特殊性 0,0,1,0,根据CSS的规则,选择器的特殊性一样就可能出现冲突的情况。

当我们点击一个链接的时候,我们希望他能运用 :active 这个伪选择器所设定的样式,但是点击链接的时候,鼠标指针自然是在链接的上方吧,这个时候也会触发 :hover伪选择器,如果把 :hover 放在了 :active 的后面,那么点击链接的时候根据层叠规则 :hover 就会覆盖掉 :active ,所以表现出来的样式就是 ‘:hover’ 中所描述的样式了。

相信根据上面这一段的解释,知道按照特定的次序放置是考虑到了相同特殊性的选择器之间的冲突与覆盖问题后,其他几个伪选择器的放置次序也就不用在解释了吧。