Learn more about CSS selector priority and specificity-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Learn more about CSS selector priority and specificity

P粉036800074 2023-08-22 22:06:31

397

I want to understand how CSS selectors work in property conflicts. How is one attribute selected over another?

div { background-color: red; } div.my_class { background-color: black; } div#my_id { background-color: blue; } body div { background-color: green; } body>div { background-color: orange; } body>div#my_id { background-color: pink; }

hello

How does selector priority work?

P粉036800074

reply all (2)

P粉7397060892023-08-23 20:07:38 2 floor

In order, 1 is the lowest specificity and 5 is the highest.https://youtu.be/NqDb9GfMXuoDetails will be shown for demonstration.

Like+0

Add Reply

P粉3842444732023-08-23 17:29:30 1 floor

I'll just add a link here to the CSS 2.1 specification itself, and how browsers should calculate specificity:

CSS 2.1 Section 6.4.3:

If specificities are equal,CSS 2.1 Section 6.4.1:

will be used

Please note that this is discussed when the style is defined, not when used. If the specificities of classes.aand.bare equal, the class last defined in the stylesheet will win.

...

and...will Set in the same style according to the definition order of.aand.b.

Like+0

Add Reply