CSS的基础学习3 -css优先级

发表于   |  

CSS的优先级也是一个很容易忽视的基础点，我对这方面也没仔细学过，所以就像加减乘法的优先级一样，必须牢记这些优先级。

CSS优先级

如果从高到低的顺序排列的话：

  1. 在属性后面加！important。它相当于最高命令，会覆盖所有样式。

    box{color:red !important;}

  2. 老二是直接在html标签中添加style属性，也就是内联样式。

    <p style="color: red; margin-left: 20px">This is a paragraph</p>

  3. 第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:10px;}。

    <html>
<head>
<style>
#idname
{
background-color:yellow;
}
.classname
{
background-color:red;
}
</style>
</head>
<body>
<div id="idname" class="classname">
<p>子代选择器</p>
<p>子代选择器</p>
</div>
<p>其他段落</p>
</body>
</html>

    子代选择器
    子代选择器
    其他段落

  4. 第四优先级是由一个或多个 类选择器、属性选择器、伪类选择器定义.如 .classname{margin:3px;} 会覆盖 div{margin:6px;}

  5. 第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖 *{margin:10px;} 。
  6. 所以通配选择器就是最低的一级了。

平时还会遇到多个相同级别的CSS选择器优先级，这个时候就要从位置上来分级了：

  1. 位于head标签里的style中所定义的CSS拥有最高级的优先权。也就是内部样式表

  2. 第二级的优先属性由位于 style标签中的 @import 引入样式表所
    定义。

    @import语法结构
    @import + 空格+ url(CSS文件路径地址);
    在html和css文件中均可使用。

  3. 第三级的优先属性由link标签所引入的样式表定义。也就是外部样式表
  4. 第四级的优先属性由link标签所引入的样式表内的 @import 导入样式表定义。
  5. 第五级优先的样式有用户设定。
  6. 最低级的优先权由浏览器默认。
  7. 如果是同一个选择器，同一个属性，是从前到后，后面的会覆盖前面的样式。