How does CSS specificity influence the precedence of conflicting styles?

How does CSS specificity influence the precedence of conflicting styles?

• A. Specificity is determined solely by the order of the selectors in the stylesheet.
• B. The order of rules in the stylesheet has the highest priority.
• C. Inline styles have no precedence over author styles.
• D. Specificity ranks selectors by type, class, and ID attributes, and the most specific wins.

Answer: (D)

CSS specificity determines which styles apply when several rules target the same element. It assigns weights to different kinds of selectors: type selectors (like div), class/attribute/pseudo-class selectors (like .warning or [type="text"] or :hover), and ID selectors (like #note). The weights stack so an ID selector is more specific than a class, which is more specific than a type selector. When two rules conflict, the one with the higher specificity wins; if they have the same specificity, the rule declared later in the cascade wins. Inline styles have even higher specificity than any stylesheet rule. This is why a rule using a more specific selector, such as an ID, will override a rule using a class or a type selector.

CSS specificity determines which styles apply when several rules target the same element. It assigns weights to different kinds of selectors: type selectors (like div), class/attribute/pseudo-class selectors (like .warning or [type="text"] or :hover), and ID selectors (like #note). The weights stack so an ID selector is more specific than a class, which is more specific than a type selector. When two rules conflict, the one with the higher specificity wins; if they have the same specificity, the rule declared later in the cascade wins. Inline styles have even higher specificity than any stylesheet rule. This is why a rule using a more specific selector, such as an ID, will override a rule using a class or a type selector.