当前位置:  开发笔记 > 前端 > 正文

CSS优先级

如何解决《CSS优先级》经验,为你挑选了2个好方法。

我的网页包含:



引用的样式表包含:

.rightColumn * {margin: 0; padding: 0;}

我在rightcolumnID中有一个表,我希望单元格有一点填充.但是,引用的样式表优先于内联样式.我通过视觉和Firebug看到了这一点.如果我关闭padding:0Firebug中的指令,则填充左边生效.

我怎样才能padding-left上班?



1> Mr. Shiny an..:

大多数答案都是正确的,说这是一个特异性问题,但在解释特异性规则时不正确或不完整.

基本上在你的情况下.rightColoumn *是"更具体" td而且规则获胜即使它提前.

CSS 2.1规则位于此处.这些规则是:

如果声明来自的是一个'style'属性而不是一个带选择器的规则,则为1;否则为0(= a)(在HTML中,元素的"style"属性的值是样式表规则.这些规则没有选择器,所以a = 1,b = 0,c = 0,d = 0.)

计算选择器中ID属性的数量(= b)

计算选择器中其他属性和伪类的数量(= c)

计算选择器中元素名称和伪元素的数量(= d)

连接四个数字abcd(在具有大基数的数字系统中)给出了特异性.

所以在你的情况下你有两个规则:

.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */

0001低于0010,因此第一个规则获胜.

有两种方法可以解决这个问题:

    使用!important做出更规则的"重要".我会避免这样做,因为当你有很多规则分散在几个文件上时会让人感到困惑.

    对要修改的td使用更高特定的选择器.您可以为其添加类名或ID,这将允许您从链接的CSS文件中取代规则.

例:


编辑:修正*的特异性规则.大卫的评论促使我重新阅读规范,这确实表明*选择器对特异性得分没有贡献.



2> Ben Blank..:

正如其他人提到的,你有一个特殊性问题.在确定优先选择哪两个规则时,CSS引擎会计算#id每个选择器中的s 数.如果一个人比另一个人多,那就用了.否则,它继续以相同的方式比较.classes和tags.在这里,您在样式表规则上有一个类,但在内联规则上没有,因此样式表优先.

你可以用它来覆盖它!important,但这是一个非常大的锤子在这里使用.您最好改善内联规则的特异性.根据你的描述,它听起来像你的.rightColumn元素是或包含一个table,你希望该表中的单元格有额外的间距?如果是这样,您正在寻找的选择器是" .rightColumn td",它比样式表规则更具体,并且优先.

推荐阅读
小白也坚强_177
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有