CSS selector specificity: which styles will be applied to two H2 tags with conflicting styles? Arrange the selectors in order of increasing specificity.

The specificity of a CSS selector is determined by the following rules:

• Inline styles (style="...") — the highest specificity.
• ID selectors (#id) — high specificity.
• Classes (.class), pseudo-classes (:hover), attributes ([type="text"]) — medium specificity.
• Tags (h2, div) and pseudo-elements (::before) — low specificity.

If two tags H2 have conflicting styles, the style with higher specificity will be applied. If the specificity is equal, the last one in the CSS will be applied.

Example of selector specificity in ascending order:

h2 { color: blue; } /* 0,0,0,1 */
.className h2 { color: green; } /* 0,0,1,1 */
#uniqueId h2 { color: red; } /* 0,1,0,1 */
style="color: yellow;" /* inline style, the highest specificity */

As a result, if two H2 elements have styles with selectors h2 and #uniqueId h2, the style with the ID selector will be applied.