css: selectors priority: #id > .class > [attr] > :pse_class > ::pse_element > combina...

css: selectors priority: #id > .class > [attr] > :pse_class > ::pse_element > combinator > tag,

1, the last selector is 'key' selector, the highest priority selector is 'priority' selector.

2, the higher priority is, the later selector runs.

if priority same, then check the type of 'key' selector: tag runs first, PSE class / attr / class / ID runs later one by one,
so 'p .class {}' has higher priority, as it run later than '.class p {}'.
--------------------------------------------------------------------------
I don't want to calculate the priority of combinators with the numbers of ID, class, attr, PSE class, tag, etc.
Even if the browser kernel code can do it, but the CSS programer could NOT do it fast when write the CSS code,
so we only see the 'key' selector (the last right) & the highest selector, it is easy!
as this, it is NOT useful to write a long '.class list' to improve the priority, maybe no one remember these .classes later.
--------------------------------------------------------------------------
for PSE class > PSE element, because PSE class is usually used for an action, PSE element used for an position in HTML.

of course PSE element is static & PSE class is dynamic, so if a combinator has or has not an PSE in 'key' selector,
the nature order is: normal selector < PSE element < PSE class, like below:

.class:hover {} > .class::first-child {} > .class {},
Even if a new .class2 added to the 3rd like .class2 .class {}, .class:hover {} will run latest also,
make sure the 'mouse move event' has the highest priority.