css样式的覆盖顺序

css样式的层叠

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <style>
     p {
        color: red;
     }
    </style>

    <title>index</title>
</head>
<body>
    <div>
        <p id ="pid" class="pclass" style="color: grey;">
            hello this is p tag!
        </p>
    </div>
</body>
</h3tml>

style.css

p {
    color: green;
    font-size: 18px;
}

#pid {
     color: orange; 
}

.pclass {
    color: black;
}

div p.pclass {
    color: blue
}

样式的优先级(由高到低)：

1. 内联样式                    style="color: grey;"
2. id选择器                     #pid  color: orange;
3. 路径下样式选择器       div p.pclass color: blue
4. 样式选择器                 .pclass color: black; 
5. 路径下 tag标签选择器        div > p
6. tag标签选择器               p      color: black;
7. 浏览器默认样式

获取最准确的样式，可以在chrome下F12，Copy CSS path