css元素样式确定

  话说,有这么一天,晨起,天气尚好,于是想着整理一下网页代码,都说减小网页代码量对于提速那是相当有效滴呀,看了看CSS代码页,心想,这些选择器这么明显的标着class,id~相信如此帅气聪明的浏览器君应该会明白我的,干脆把前缀全部删去吧,免得看着不美观~哈,突然觉得我特聪明,不过~结果让我彻底凌乱了~这页面被毁得,面目全非了,介个是为那般捏~好吧,回归主题:

  对于css选择器,浏览器君并非一眼望去,直接匹配的,因为层叠,严谨的它怎会如此草率呢,对于元素样式的确定,往往要在多个样式之间进行权衡,css通过层叠处理规则之间的冲突,层叠就是给每规则确定一个重要度:

    标有!important的用户样式 > 标有!important的网页制作者的样式 > 网页制作者样式 > 用户样式 > 浏览器样式。

  接下来就是对选择器特殊性的判断了,特殊性强的选择器样式优于特殊性相对弱的选择器样式,同等特殊性的选择器样式,后定义的样式优先。

  那特殊性如何确定呢?选择器特殊性分为4个等级,我们可以把它设为a,b,c,d,并把它们这样连起来:abcd,值大的特殊性大。

    a—该元素为行内样式时,a=1,否则a=0;

    b—b为ID选择器的总数;

    c—c为类,伪类,属性选择器的个数;

    d—的为类型选择器,伪元素选择器的个数;

  现在总算明白为何浏览器君不懂我的心了,如果将某个规则应用于一个元素而不发生效果,很有可能就是特殊性问题哦,这时应该考虑是否文档其他地方使用了更特殊的选择器,不要急急忙忙的将它定义为bug哦,可以试着在该选择器前加上父级的class、id,让该选择器更特殊,浏览器君会明白的~

  哦,忘了还有一点要注意的,浏览器君对于选择器的匹配是至右向左的,所以不要盲目的加一大堆父级class,父级的父级class......刚刚好就好~

原文地址:https://www.cnblogs.com/pada/p/3688832.html