Both rules below come from the same author stylesheet and both match the same element, an <h2 class='title'> inside the sidebar widget. Neither uses !important.
#sidebar .widget h2 { color: red; }
.page .sidebar .widget h2.title { color: green; }
Which declaration wins, and why?
Green — the second selector matches more of the element's classes, so it describes the element more precisely.
Green — the second rule appears later in the stylesheet, and source order is compared before specificity.
Red — specificity is compared column by column, and one ID selector outranks any number of class selectors.✓Ճիշտ պատասխան
Green — the second selector has more components in total, and specificity is decided by the total count of selector parts.
Բացատրություն
Specificity is a three-part value, not a total score. '#sidebar .widget h2' is (1, 1, 1); '.page .sidebar .widget h2.title' is (0, 4, 1). The comparison walks the columns left to right and stops at the first difference: 1 > 0 in the ID column, so the red declaration wins and the four class selectors never get compared. Counting selectors overall, or assuming that 'more classes matched' means 'more specific', is the usual mistake here. Source order would only decide the outcome if the specificities were equal, which they are not.