CSS优先级 - 走看看

一、引入CSS样式的方法

　　在HTML文件中引入CSS样式有三种方法：

外部样式：通过link标签引入CSS样式
内页样式：写在HTML页面里面的style标签里面
行内样式：写在对应标签的style属性里面

　　我知道一般情况下使用外部样式，减少代码冗余，同时便于后期维护。

　　外部样式：

　　css/common.css　　

.c1{
    background-color: #960606;
    color: white;
}

.c2{
    font-size: 50px;
    color: black;
}

　　引入外部css样式：　

<head>
    <meta charset="UTF-8">
    <title>css优先级</title>
    <link type="text/css" rel="stylesheet" href="css/common.css"/>
</head>
<body>
    <div class="c1">好好学习，天天向上</div>
</body>

　　如下：

二、CSS样式优先级

　　2.1 从CSS代码存放位置看权重优先级

　　　　内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。

.c1{
    background-color: red;
    font-size: 30px;
    color: white;
}

.c2{
    font-size: 50px;
    color: black;
}

common.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css优先级</title>
    <link type="text/css" rel="stylesheet" href="css/common.css"/>
    <style>
        .c1{
            font-size: 100px;
            color: green;
        }
        div {
            font-size: 40px;
            color: pink;
        }
    </style>
</head>
<body>
    <div class="c1" style="background: blue; color: yellow">好好学习，天天向上</div>
</body>
</html>

对比优先级

　　2.2从样式选择器看权重优先级

　　　　important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。

相当于：　

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

.c1{
    background-color: red;
    font-size: 30px;
    color: white;
}

.c2{
    font-size: 50px;
    color: black;
}

common.css

<head>
    <meta charset="UTF-8">
    <title>css优先级</title>
    <link type="text/css" rel="stylesheet" href="css/common.css"/>
    <style>
        #c1{
            font-size: 60px;
            color: black;
        }
        .c1{
            font-size: 100px;
            color: green;
        }
        div {
            font-size: 40px;
            color: pink;
        }
    </style>
</head>
<body>
    <div class="c1" id="c1" style="background: blue; color: yellow">好好学习，天天向上</div>
</body>

对比优先级

　　2.3 同级选择器，后者覆盖前者

　　和样式选择器编写顺序有关，越往下优先级越高　

.c1{
    background-color: red;
    font-size: 30px;
    color: white;
}

.c2{
    font-size: 50px;
    color: black;
}

<body>
    <div class="c1 c2">好好学习，天天向上</div>
</body>

　　如下：