Css-defined weights and css-defined weights

Css-defined weights and css-defined weights

The following is a weight rule: the label weight is 1, the class weight is 10, and the id weight is 100. The following example shows the weights of various definitions:

/* The weight is 1 */
Div {
}
/* Weight: 10 */
. Class1 {
}
/* Weight: 100 */
# Id1 {
}
/* The weight is 100 + 1 = 101 */
# Id1 div {
}
/* Weight: 10 + 1 = 11 */
. Class1 div {
}
/* Weight: 10 + 10 + 1 = 21 */
. Class1. class2 div {
}

If the weights are the same, the final style will take effect, but this situation should be avoided.