同级css渲染顺序问题

CSS基本渲染顺序大家估计都很清楚

  1. 内嵌>样式表
  2. ID >> Class >> 标签
  3. 组合的权重是选择器越多，权重越大

问题：同级（即权重完全一样）的css怎么渲染？

实验

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test html css</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="a b"></div>
</body>
</html>

css

.b{
    background-color: black;
}
.a{
    background-color: red;
}

实验结果

结论

这个实验中特意在div的class中写的顺序是先a后b，在css文件中写的是先b后a，从结果可以看到时css文件中的书写顺序决定了最终渲染结果

posted @ 2016-04-26 16:11  dannyliu  阅读(774)  评论(0)  编辑  收藏  举报