css元素样式来源和优先级冲突的解决方案

必做: css元素样式来源有哪些,实例演示

1. 浏览器默认样式

   因为浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的，一旦有其他地方设置了标签样式，浏览器默认样式就会被冲掉。

2. 内联样式

   <元素 style=’ ’>中编写的样式代码。

   <a style="color:#fff;font-size: 12px;" href="###">内容</a>

3. 内部样式

   style中编写的样式代码

   <style>
       body{
           background-color: #fff;
       }
   </style>

4. 引用样式

   link引用的css文件

   <link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">

5. 浏览器用户自定义样式

   通过设置浏览器字体大小来改变默认样式，或者看文章时，设置字体大小。

---

选做: css优先级冲突的解决方案

1. 细化选择符

   可以使用后代组合器或子代组合器这种更为精确的描述。描述得越精确，优先级越高，优先级更高的描述会覆盖优先级较低的描述。

2. 提升css样式的优先级

   不推荐，相对而言会简单粗暴一些。在细化CSS里面，只要在样式后面加一个!important，例如这样：

3. 改变多个CSS样式的加载顺序

   这种方法比较简单，就是只要把细化css加载在全局css之后就行了，这样后面的样式就会自动覆盖前面的样式。