CSS inheritance and cascading, weight calculation, important

2024-07-12

CSS inheritance

Child elements can directly inherit the style attributes of the parent element that will affect the child elements, so some elements have no style set and the style has changed.

CSS cascading

Different selectors select the same element. Different attributes between selectors can be superimposed, and the same attributes will be overwritten according to the weight.

Calculation of weights

Weight: label = 1, class = 10, id = 100, row (js) = 1000
First, check whether the element is selected. If it is not selected, the weight is 0. If it is selected, calculate the weight, and the one with the larger weight will prevail. If the weights are the same, the last one is the final style.

important

<style>
		/*important只作用于当前的属性，强调非常重要，不会被后续的样式覆盖，但不影响当前的权重*/
		div p{
			color: pink;
			font-size: 15px !important;
		}
		.header p{
			color: red;
			font-size: 25px;
			
		}
	</style>
</head>
<body>
	<div class="header">
		<p>段落</p>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

In the above code, although the weight of .header p is greater than that of div p, the font-size attribute of div p uses !important, so setting the font size of the one with greater weight will not take effect.

Technology Sharing