CSS 中的样式优先级

2024年4月27日 85次阅读 来源: 老毛

心血来潮对比了一下CSS中样式优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 优先级</title>
    <!-- 外部样式表 External Style Sheet-->
    <link rel="stylesheet" href="style.css">
    <style>
        /*内部样式表Internal Style Sheet*/

        .testClass{color: blue;} /*低于行内样式style="color:red;"*/
        /*.testClass{color: blue !important;}  */ /*高于行内样式style="color:red;"*/

        #testId{color: yellow;}  /*高于class低于行内低于!improtant*/
    </style>
</head>
<body>
    <div class="testClass" style="color:red;"><!-- 内联样式-行内样式 -->
        测试Css中的Important优先级
    </div>
    <div id="testId" class="testClass">
        比较ID选择器和Class选择器优先级
    </div>
</body>
</html>

总结如下：
！important > 内联样式 > 内部样式表{ID选择器>Class选择器>标签选择器} > 外部样式表

    原文作者：老毛
    原文地址: https://segmentfault.com/a/1190000009304796
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞