CSS的三大特性
覆盖性
在为HTML文件编写CSS样式时,我们可能会对同一个标签重复编写样式,如:
</head>
<style>
p{
color: red;
}
p{
color: pink;
}
</style>
<body>
<p>这是一个段落</p>
</body>
在上面这段代码中,为编写了两个同样的样式,在真正执行时是执行下面的粉色的,当出现了同样式的编写,就会产生覆盖,后来者居上,后写的会把原来的覆盖掉。这就是CSS的覆盖性。
继承性
在CSS中子类可以继承父类的样式,但并不是所有样式都可继承。只有以text- fort- line-
开头和color
样式才可被子类继承。
</head>
<style>
.one{
color: red;
}
</style>
<body>
<div class="one">
<p>这是一个段落</p>
</div>
</body>
如以上,虽然我们没给P标签写样式,但是P可以通过继承他的父类来获得color:red;
的样式。
优先级
在上面的覆盖性中我们说到,当出现同意样式的编写时会产生覆盖,这只是针对于使用同样的选择器。而是否产生方法的覆盖,还需要考虑到优先级的问题。以下列表是所有选择器的优先级数据。
选择器 | 优先级 |
---|---|
每个通配符选择器 | 0,0,0,0 |
每个继承 | 0,0,0,0 |
每个标签选择器 | 0,0,0,1 |
每个类选择器 | 0,0,1,0 |
每个ID选择器 | 0,1,0,0 |
每个行内样式 | 1,0,0,0 |
每个 !important(写在样式后) | ∞ 无穷大 |
当为一个样式编写了多个重复的样式后,系统会选择优先级最高的那一个。当我们使用复合选择器时,优先级还会出现叠加。
但是无论如何叠加,优先级是没有进位的,如10个标签选择器叠加,优先级为0,0,0,10 。而一个类选择器优先级为0,0,1,0 。优先级依旧是类选择器更高。
需要特别注意的是,继承而来的样式优先级为0,无论父类的优先级有多高,子类继承过来优先级都为0.当两个选择器优先级相同时,则出现覆盖,离结构最近的样式会被选中。
所以在我们去考量优先级时,第一先看标签是否被选中,当有多个都选中了在按公式去计算优先级。