CSS 中的样式优先级

weixin_33918114

于 2017-05-05 10:46:11 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000009304796

本文通过实例演示了CSS中不同类型的样式优先级，包括内部样式表、外部样式表、ID选择器、Class选择器及内联样式的优先级关系。

心血来潮对比了一下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选择器>标签选择器} > 外部样式表