前端学习随笔5 选择器的层叠（优先级）与继承(CSS样式的优先级问题引起的一些情况)

前端学习随笔5 选择器的层叠（优先级）与继承

随笔3中已经讲过选择器概念及分类，下面主要讨论以下选择器的优先级，说到这里就需要了解一下CSS层叠和继承的概念。

一 层叠

CSS全称是 Cascading Style Sheets，中文译名为层叠样式表，其说明层叠是十分重要的，那层叠的规则是什么呢？难道就是后面声明的样式覆盖前面声明的样式？

通过MDN文档中的描述，我们可以知道层叠次序取决于三个因素：

1. 重要性（importance）
2. 专用性（Specificity）
3. 源代码次序（Source order）

1 重要性

当属性值后面加了代码 !important时，这条语句将会优先于其他语句，不管其出现在哪里。但是我们十分不推荐使用它，因为其过于特殊，不能被其他样式覆盖，在调试和修改css的时候变得非常困难。

2 专用性

专用性可以理解成选择器的权重，权重越高，优先级越高，以下是各种选择器的优先级权重表

注：组合选择器是将其包含的选择器权重相加，例如组合选择器p #test的权重为100+1=101。

3 源代码次序

多个相互竞争的选择器具有相同的重要性和专用性，那么以哪个为准呢？法则简单粗暴——后来者居上（靠后定义的属性值生效）。

4 总结

由以上我们可以看出，有!important的优先级最高；没有!important看权重，权重高的优先；没有!important而且权重相同，那就后来者居上

二 继承

讲到这里我们已经明白了CSS样式的优先级，那问题又来了，如果一个元素我没有定义某个属性的具体属性值例如font-size,那这个元素以多大的字体表现呢？css中有两种途径来获取该属性值：

1. 默认的属性值——在css中，元素属性值都会有一个默认值，如果你不设定，那么就会按照默认值来
2. 继承——通过继承来获取元素属性值

css处理继承有以下几个通用属性值：

1. inherit：选定元素属性值与其父元素相同
2. initial：选定元素属性值与浏览器默认样式表相同；若默认无值，则继承父元素属性值
3. unset：重置为自然值
4. revert：属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式

注：自然值的概念——如果属性能继承，那么该自然值为自然继承值；如果该属性不能继承，那么自然值为浏览器默认值。

注：有些属性的能继承，有的不能继承。具体内容请参考相关文档

CSS样式的优先级问题引起的一些情况

做网站开发前台网页的时候，时不时会碰到一些奇怪的问题，有时还真的莫明其秒。这不，前些日子双碰到一个让我大跌眼镜的问题：wordpress评论回复时不显示，而直接评论能正常显示。开始以为是代码问题，结果不是。因为，在文章中的评论回复是正常显示，而在图集幻灯中的评论就不能显示。这是怎么回事呢？

经过多次查找，终于让我找到问题之所在，如下图：

wordpress自动在 children 标签里添加了 style 性性，这样一来，我在主题 style.css 中定义的样式 就不起作用了。晕死。怎么办呢？我想只有我的style.css里的样式优先于wordpress自动添加的样式，才能解决问题。CSS中怎样才能优先于 style 呢？只有通过 !important; ，因为这个级别是最高的，也是最优先的。还好，wordpress自动添加的没有带这个属性。于是，我给相关的标签添加了 !important; 问题迎刃而解。

 ul.children { width:610px !important;left: 50px !important;; position: relative; overflow: hidden; padding: 0px; margin:30px; }
ul.children li.comment{ width:100% !important; }

以下简述 CSS 优先级：

[1位重要标志位] > [4位特殊性标志] > 声明先后顺序

!important   >   style   >   [ id   >    class   >    tag ]

使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。