css样式优先级

有时在设置 HTML 元素时，会遇到相互冲突的多个样式。这时，到底是选择哪个的样式呢？看完下面的文章，你就懂了

1.在body上设置样式，

<style type="text/css">
    body {
        color: red;
    }
</style>

<h1>Hello World!</h1>

运行结果：

如图，会采取body的样式

2.给h1加个class类

<style type="text/css">
	 body {
	     color: red;
	 }
	 .green-text {
	     color: green;
	 }
</style>

<h1 class="green-text">Hello World!</h1>

运行结果：

如图，class覆盖了body的样式，字体变成了绿色，所以class的优先级大于body

3.给h1再加一个class类

<style type="text/css">
    body {
        color: red;
    }
    .green-text {
        color: green;
    }
    .blue-text {
        color: blue;
    }
</style>

<h1 class="green-text blue-text">Hello World!</h1>

运行结果：

如图，字体变成了新定义的蓝色字体
此处需要注意的是：在 HTML 中这些 class 如何排序是无所谓的。
但是！在

4.给h1加个唯一的id

<style type="text/css">
    body {
        color: red;
    }
    .green-text {
        color: green;
    }
    .blue-text {
        color: blue;
    }
    #pink-text {
        color: pink;
    }
</style>

<h1 class="green-text blue-text" id="pink-text">Hello World!</h1>

运行结果：

如图，字体点成了粉色
此处注意：你声明的 CSS 类选择器在上面还是下面是无所谓的，因为 id 属性总是具有更高的优先级，会覆盖它们
得到：id的优先级大于class

5.给h1加一个行内样式

<style type="text/css">
    body {
        color: red;
    }
    .green-text {
        color: green;
    }
    .blue-text {
        color: blue;
    }
    #pink-text {
        color: pink;
    }
</style>

<h1 class="green-text blue-text" id="pink-text" style="color: black">Hello World!</h1>

运行结果：

如图，字体变成了黑色，
得到：行内样式的优先级高于id

别急，还没完，还有个最强大的
6.!important
在元素的 color 声明加上关键字 !important，就能 100% 确保你的 h1 颜色是这个元素申明的颜色。
如，我们想让前面的蓝色显示出来，则只需改

    .blue-text {
        color: blue !important;
    }

运行的效果就会变成蓝色字体了

所以，最终得出的结论是，1-6 优先级逐步提高