Three characteristics of css:
Cascading, inheritance, priority.
Stackability (coverage):
- Different values of the same attribute of the same selector will conflict, in this case, the principle of proximity is adopted.
- Different attributes of the same selector will not conflict.
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<Style>
div {
color: red;
}
div {
color: blue;
}
</Style>
</head>
<body>
<div>就近原则显示蓝色</div>
</body>
</html>
Page effect:
inheritance:
- Child tags inherit certain styles of parent tags
- The attributes and colors related to the text will be inherited
- The length, width and margins of the box will not be inherited
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: red;
/* 让div包含P标签，成为父标签 */
}
</style>
</head>
<body>
<div>
<p>此处p是子标签会继承父类的颜色，为红色</p>
</div>
</body>
</html>
Webpage effect:
Priority:
Multiple selectors are defined for the same element, conflicting attributes, determine which selector should be used
| Selector------------------- - | Weight-------- |
|Inheritance or *----------------------|0,0,0,0|
| Element Selector (label) — |0, 0, 0, 1 |
| Class selector, pseudo-class selector | 0, 0, 1, 0 |
| id selector ------------- ------ |0,1,0,0 | | Inline
style------------------ |1,0,0,0 |
Same kind of selector , Adopt the principle of proximity.
Compound selectors will have the right to overlap, the solution is to add weights (no carry)
example;
ul li{} weights are 0,0,0,1+0,0,0,1=0,0,0 , 2
li {} weight 0, 0, 0, 1,
so choose the selector ul li