关于css:CSS-之层叠与继承

49次阅读

共计 1273 个字符,预计需要花费 4 分钟才能阅读完成。

CSS 层叠(Cascading)指的是某个元素会依据款式规定的优先级来设置某个元素的外观。
层叠款式的优先级次要有三方面:
  1. 依据款式域判断,是用户代理款式(user agent stylesheet),还是咱们本人写的款式;是否存在 !important 标识;
  2. 依据元素款式属性判断,是否是写在元素行内的 style 属性中;
  3. 依据选择器判断。
用户代理款式是什么?

基本上所有浏览器都有默认的款式,例如 <h1>-<h6><p> 标签都有默认的上边距和下边距,这是由浏览器默认设置的,所以叫用户代理款式。

如果一个元素身上有很多的款式规定,那么到底该利用哪一条呢?

首先,浏览器会先判断以后款式是用户代理款式还是咱们本人写的款式,这两者中,咱们本人写的款式优先级要高,所以如果同一个元素上存在雷同的款式规定,咱们本人写的会笼罩浏览器默认款式;

而后,判断以后款式规定是否存在 !important 标识,如果存在,阐明它的优先级高,则利用该款式;

其次,判断以后款式规定是否是行内款式,如果是行内款式,它的优先级高于其余款式(然而除了有 !important 标识的除外);

而后,依据选择器的优先级来判断,选择器的优先级程序从大到小是:ID 选择器、类选择器、属性选择器、伪元素选择器、标签选择器;

最初,依据选择器的个数判断,如果 ID 选择器的个数都雷同,则判断类选择器的个数,如果又都雷同,则判断属性,伪类元素的个数,如果最初失去的优先级一样,则依据代码程序,后来者居上,后者笼罩前者。

上面是款式层叠的规定,依据优先级大小降序排列:

  1. 是否是行内款式,并且有 !important 标识;
  2. 是否具备 !important 标识;
  3. 是否具备 ID 选择器;
  4. 是否具备类选择器;
  5. 是否具备属性、伪元素选择器;
  6. 是否具备标签选择器;
  7. 是否具备通配符选择器;
  8. 用户代理款式;
  9. 继承款式。

继承(Inheritance)

继承指的是元素能够通过继承先人元素的款式给本身,然而并不是所有款式都能够继承。

文本能够继承的款式

这些文本属性能够通过继承实现:color,font,font-size,font-weight,font-variant,font-style,font-family,line-height,word-spacing,white-space,letter-spacing,text-transfrom,text-indent,text-align。

其余可继承的款式

列表元素的局部款式能够通过继承实现:list-style,list-style-type,list-style-position,list-style-image。
表格元素的边框属性:border-collapse,border-spacing。

tips:
平时咱们在开发中,最好少用 !important 标识和 ID 选择器,应该它们的优先级很高,如果咱们前面想要笼罩他们的款式则必须用雷同的形式持续增加 !important 或 ID 来实现,这种形式不利于保护。咱们能够通过类选择器、款式层叠规定来笼罩。

参考:《CSS in Depth》Keith J. Grant 著

正文完
 0