上一篇简单总结了一下选择器，如果一个元素被多个选择器选中，元素的样式就会以级联方式被应用到。要搞清最终那个样式被应用到元素上了，首先要明白引用CSS代码的几种方式。
这种方式给元素添加CSS代码有一定的局限性，抛开浏览器解析渲染CSS样式的性能不说，但从DRY原则来看就不太好。每次想修改同类型样式的元素，要逐个修改元素的style属性。
这种引用CSS代码的方式在一定程度上解决了所有CSS代码都分散写在各个元素上的问题，但是不利于CSS代码的整体重用。如果某些class需要在多个Html文件中引用，需要将style标签里的内容复制粘贴到各个Html中。
通过link标签来引用外部CSS文件。CSS文件可以位于和Html文件同一个服务器上，也可以是互联网上任意的一个地址，例如CDN。
这种方式我们可以做到CSS代码的重用，但由于引用了外部文件，浏览器会额外发送一个http请求去加载CSS文件，性能上可能稍微会有一点影响，但以目前浏览器的性能，少量额外的http请求都是可以接受的。
回到开头的问题，如果我有两个选择器都选中了某个元素，分别赋予这个元素不同的样式，到底哪个选择器中的样式会被应用呢？看一下如下的栗子：
首先要知道，Html是从头到未顺序加载并解析的。无论是style标签还是CSS外部文件引用都是如此。从例子中可以看到，div中的文字会变成蓝色，即在CSS代码中，在选择器相同的情况下，靠后的CSS代码样式会覆盖掉之前的样式。
这个栗子中，尽管红色字体选择器更靠后但是由于前面的一个选择器更详尽的选中了div元素内的p元素，所以p里面的文字颜色为蓝色，即更详尽的选择器样式覆盖掉了之前的样式。而p选择器里面还添加了文字下划线样式，这个样式被继承了下来，所以最后p元素的文字是蓝色，并且有下划线。
最后发现，style属性的优先级最高。所以我们可以通过Javascript来动态的修改元素的style属性值，如display: none， 达到修改元素样式的效果，而且不会受到之前任何选择器样式的影响。
通过栗子发现，子元素child的文字颜色继承自parent的样式，通过Chrome的developer tools也可以清楚的看到。
关于继承，还有一种情况是有些Html元素是不会继承父元素样式的，例如input。需要详尽选定该元素来设置具体的样式。这里就不一一举例了，大家遇到样式不是预期效果的情况，可以通过developer tools来查看到底哪个选择器的样式被应用到了。
