1. 层叠性(Cascading)
层叠性是CSS的核心特性之一。在网页中,可能会同时应用多个样式表,包括用户自定义样式表、浏览器默认样式表和开发者提供的样式表。层叠性规定了不同样式表之间的优先级和应用顺序,最终确定了每个元素应用的样式。具体来说,层叠性遵循一套规则,如样式表来源、选择器特异性和样式表中的顺序等,以确定最终样式的计算结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css特性</title>
<style>
div{
color: aqua;
font-size: 32px;
}
div{
color: blueviolet;
font-weight: 700;
}
</style>
</head>
<body>
<div>我是div标签</div>
</body>
</html>
特点:
- 相同的属性会覆盖:后面的css属性覆盖前面的css属性
- 不同的属性会叠加:不同的css属性都生效
2. 继承性(Inheritance)
继承性是指子元素可以继承父元素的样式。在CSS中,某些样式属性(如字体样式、颜色等)会被子元素继承自其父元素,除非子元素明确地重写了这些属性。通过继承性,可以减少重复的样式定义,提高代码的可维护性。
特点:子级默认继承父级的文字控制属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承性</title>
<style>
body{
font-size:32px;
font-weight: 400;
color: blueviolet;
}
</style>
</head>
<body>
<p>p标签</p>
<div>div标签</div>
<a href="#">超链接</a>
<!-- 标签的颜色无法改变,因为他本身自带有颜色属性 -->
</body>
</html>
3. 优先级(Specificity)
优先级规定了当多个样式规则应用于同一个元素时,哪些规则具有更高的优先级。优先级由选择器的特异性(Specificity)决定,特异性高的选择器具有更高的优先级。通常,选择器的特异性由选择器本身的类型、类、ID等决定。在CSS中,通过计算选择器的特异性,可以确定最终应用于元素的样式规则。
优先级:也叫权重,当一个标签使用多种选择器时,基本不同类型的选择器的匹配规则。
规则:选择器优先级搞的样式生效
公式:通配符<标签选择器<类选择器<id选择器<行类样式<!important(选中标签的范围大,优先级越低)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css优先级</title>
<style>
div{
font-size: 32px;
color: brown;
}
#two{
/* 最终为这个样式效果 */
color: blue;
font-size: 50px;
}
.one{
color: cadetblue;
font-size: 20pxS;
}
</style>
</head>
<body>
<div class="one" id="two">div标签</div>
</body>
</html>
优先级-叠加计算规则
叠加计算:如果是复合选择器,则需要圈重叠加计算
公式(每一级之间不存在进位)
(行类样式,id选择器个数,类选择器个数,标签选择器个数)
规则:
- 从左到右依次比较选个数,同一级个数多的优先级高,如果相同,则向后比较
- !important权重最高
- 继承权重最低
这三大特性共同构成了CSS样式表的基本工作原理,帮助开发者有效地管理和应用样式,实现对网页外观的精确控制。