你知道那行css代码改变了网页样式嘛？

好多时候写完一段css代码，却发现网页的样式没用按照自己设想的那样展示，而是在一个比较不可能的地方，你发现了那一段神奇的代码。

Css就是以这样神奇的方法控制着网页的样式。今天我们就剖开它神秘的面纱，抛弃未想到的神奇代码。一起学习css代码的优先顺序。

究竟哪行代码会影响到你的的样式，其实可以归结为三个词，九个字。记住这九字真言，css的路上，你就不会迷路。1、重要性；2、专用性；3、源代码次序。

重要性。

重要性谁重要就显示谁。这个不用多说了。但是怎么样来表示重要一个属性很重要了。css为此专门提供了一个单词“!important”。在一个属性后面添加上important，那就妥了。这个属性就是最重要的。如下

你猜上面div中的字体颜色是什么样的呢？

刚说了重要性嘛，当然是green了。

但是您可能又要说了，如果是上面代码都加了重要性，会怎么样显示呢？这个你可以先去试一下。在下面咱们会讲到。

专用性

什么是专用性呢？

我觉得用一个成语来说专用性比较合适，就是鹤立鸡群。千万人中，只有你一个，我当然就看到你了。

那么在css中具体怎么表现呢？

就是一个选择器，它指代的越少，专用性就越高。现在回忆一下选择器和css代码的写法。

代码可以直接写在css标签内，称为行内样式，也可以写在style标签或者css文件内。

当css代码不写在html标签内时，我们就要用到选择器，其中id选择器只能有一个，class选择器有一个到多个，标签选择器会指向所有的该标签。

现在你可以看到了吧？在标签内直接写的天生就粘附在一起，当然专用性最高了；id选择器也很专一，一个页面中只有一个，专用性次之。

让人比较头疼的是class选择器和标签选择器谁的专用性高呢？

回头看看我刚才说什么来着？class选择器可能是一个也可能是一堆，标签选择器则一定是一堆，代表着所有的该标签。

所以class选择器的专用性药高于标签选择器。

现在知道到了吧？如果同意个地方同时被id选择器，class选择器，标签选择器，行内样式声明了，会显示那个吧！

源代码次序。

现在可以回答重要性里最后提到的那个例子了！如果三个都申明了重要性，那么它们的重要程度就是一样的了，这时候谁在代码的最后，就显示谁。这就是源码次序。

源码次序我觉得也可以用一个歇后语来形容，那就是后来的石头居上。

当一个地方的css代码被重复声明，且它们的重要性，专用性都一样时，那就看顺序，谁在最后出现就显示谁。

知道这些，基本上对那段代码在影响着你的样式就能弄明白个大概了，现在总结一下。搞不明白究竟那段css代码在影响你的样式时，首先看重要性，然后看专用性，最后看出现顺序。

下面我们来看最后一个影响样式的因素，继承。

继承

什么是继承，就是你爸长得帅，那你也有可能长的帅，继承你爸的基因嘛。基本上像字体，颜色这些是会继承，像margin，padding等不会继承。具体可以去这个地方查看css参考

不过css不像现实社会，可以控制自己要不要继承，现实中你爸长得帅，能不能被你继承你说了不算，而css说了就可以算。

inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。

initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素

设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承 的，那么该属性值就被设置为 inherit。

unset ：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。

revert ：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。