[Original] Judging the style rendering priority of CSS selector through IE8 Testing

The following are personal test results for your reference only.

1. The priority of the character style is:

Inline style> multilevel character style> ID character style> class character style> tag character style

For exampleStyle = "color: Red"Is an inline style, which has the highest priority, and is similarDiv {color: Blue}Such a simple tagname selector has the lowest priority.

2,The multi-layer selector loads and retains the style with the highest priority based on the priority of the single-layer selector. The higher the level, the higher the permission. The style is determined based on the priority of the single-layer selector at the same level..

The multilevel selector definition has a higher priority than the single-layer selector definition. For example, the DIV # mydiv {...} definition overwrites the attribute values of the same name in the # mydiv {...} definition.

3. The Loading Order of the selected character style is top-down loading by text stream,The style priority of different delimiters is irrelevant to the defined position.For example, the ID and class delimiters applied to the same tag have a high priority no matter who is first defined.

WhileThe style with the same name is always loaded with the same style. The attribute has a high priority and will overwrite the existing attribute definition.The style with the same name is considered to be merged by the browser according to the loading order and different style attribute definitions will overwrite the same style attribute definitions to form a unique overall class definition.

4,When multiple class delimiters are applied to the same tag, the priority of each class is irrelevant to the application order and only related to the location order when they are defined.I guess that IE may enumerate all the classes applied to it and merge them according to the defined order of these classes, which is irrelevant to the order in which these classes are referenced. It seems that the combination of multiple different class styles by IE still follows the principle of merging the definitions of classes with the same name. The post-defined priorities in the text stream sequence are high.

For example, <Div class = "C2 C0 C1"> regardless of the order in which C0, C1, and c2 are referenced, the merging order is still merged according to the defined order in the style sheet. Do other browsers follow this principle? In the past, it was always assumed that when multiple classes were applied to the same tag, the style was rendered in the reference order. After testing, the style was still rendered in the order defined by the referenced class.

 

Summary:The priority of style rendering depends on the personalization of the selector. The higher the private level, the higher the priority.