css优先级

css的样式来源

外部样式通过标签link引入
当前文档,写在<style>中的样式
行内样式，通过属性style=""添加的
用户代理样式，浏览器默认样式

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式来源</title>
    <link rel="stylesheet" href="style.css"><!-- 1.连接外部样式 -->
</head>
<!-- 2.当前文档样式 -->
<style>
div{
    background:aqua;
    width:500px;
    height:500px;
}
</style>
<body>
    <div>
        <h1 style="background:brown">666</h1><!-- 3.行内样式通过style属性添加 -->
        <!-- 4.浏览器默认样式'a'标签,蓝色字体有下划线 -->
        <a href="">a标签的默认样式是蓝色的字体有下划线</a>
    </div>
</body>
</html>

css样式优先级样式的解决方案

1.细化选择

.style{background:red}

2.提高样式优先级

{background:aqua !improtant;}

css的样式来源

css样式优先级样式的解决方案

相关文章