What is the conflict with css?

CSS conflict means that when multiple CSS styles are applied to the same element, there may be different formatting of the same attribute between these styles; when a conflict occurs, the browser follows the priority principle Or the latest principles to solve CSS conflict problems.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, DELL G3 computer

CSS conflicts and resolution

When multiple CSS styles are applied to the same element, there may be different formatting of the same attribute between these styles. When conflicts occur, the browser resolves CSS conflicts by following the following principles.

1. Priority principle

2. Recent principle

3. For style definitions of the same attribute, styles defined later will overwrite previously defined styles.

Priority principle: It means that the style with the highest priority is valid, among which inline style > inline style | link external style, that is, inline style has the highest priority, while inline style and link external style The priority of styles is determined by the position where they appear. Whoever appears later has higher priority. In styles of the same type, there are also different priorities between selectors. The priority of selectors is specified as: ID selector>class selector|pseudo-class selector|attribute selector>element selector|pseudo Element selector > Wildcard selector | Child element selector | Adjacent sibling selector, that is, the ID selector has the highest priority.

Latest principle: Mainly for inherited styles. The closer to the parent class style of the formatted element, the higher the priority. For example:

tag, and its priority will be higher than the