关于CSS的层叠特性

博客

我们先来看一个demo：

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    .demo1{
        color: green;
    }
    .demo2{
        color: red;
    }
    .demo3{
        color: blue;
    }
</style>
<p class="demo1 demo2 demo3">这是一段测试文字</p>

那么段落文字是什么颜色呢？答案是blue，为什么呢？因为根据CSS的层叠特性，在同选择器等级的情况下，后定义的相同属性值会覆盖掉之前定义的属性值(注：这个和<p>中定义的class：demo1、demo2、demo3的排列顺序无关)。
所以如果是下面这个demo

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    .demo1{
        color: green;
    }
    .demo2{
        color: red;
    }
    .demo3{
        color: blue;
    }
</style>
<p class=" demo3 demo1 demo2">这是一段测试文字</p>

段落文字颜色还是blue。
如果是

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
    .demo3{
        color: blue;
    }
    .demo1{
        color: green;
    }
    .demo2{
        color: red;
    }
</style>
<p class=" demo3 demo1 demo2">这是一段测试文字</p>

段落文字颜色就是red了。