CSS元素来源及CSS优先级冲突的解决方案 -

CSS元素来源

-1，浏览器默认样式
-2，用户自定义样式
一，在HTML中使用<style>标签来定义样式
示例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
        <style>
        #hello{
           color:blue;
        }
    </style>
    <body>
         <span id="hello">你好。</span>
    </body>
    </html>

二，使用<link>标签来导入CSS文件来定义样式
<link rel="stylesheet" href="XXX.css" />

-3，在标签中使用style来重新定义已定义好的样式
示例：<span style="color:red">你好</span>

CSS优先级冲突的解决方案

选择器的优先级如下：
标签内style > ID > CLASS > 标签
示例:

 /*0,0,3*/
    body div h2{
        color:red；
    }

/*0,1,0*/
    .hello h2{
        color:blue;
    }

<h2 style="color:green;">你好</h2>

-通过示例得出结论，使用的自定义样式时，会根据 “标签内style > ID > CLASS > 标签” 来执行CSS代码执行优先级最高的选择器。

如果在开发过程中发现样式有冲突，可以使用优先级高的选择器来进行修改。

如果已经完成网页样式定义后发现仍有标签需要修改样式，那么可以在标签内使用style元素样式来定义元素，style元素样式(<h2 style="color:green;">你好</h2>)是CSS优先级里面等级最高。