前端- css specificity

发表于 分类于

前端-css specificity

specificity

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

There are four categories which define the specificity level of a selector:

Inline styles - An inline style is attached directly to the element to be styled. Example:

.

IDs - An ID is a unique identifier for the page elements, such as #navbar.

Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Notes： Equal specificity: the latest rule counts

important

The !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied.

h1 {
  background-color: red !important;
}