What is the conflict with css?-Front-end Q&A-php.cn

What is the conflict with css?

藏色散人

Release： 2023-01-03 09:30:59

Original

2697 people have browsed it

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.

What is the conflict with css?

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:

…

, set the style for the

tag, and its priority will be higher than the

tag style.

In addition, adding !important after the style can raise the priority of the style to the highest level (higher than the inline style)

[Recommended learning: css video tutorial】

The above is the detailed content of What is the conflict with css?. For more information, please follow other related articles on the PHP Chinese website!