An introduction to CSS priority order

CSS order and priority is a challenging part of styling web pages. You may one day discover that the CSS style you tried to apply doesn't work. It looks like the webpage is not executing your code. This may be caused by CSS order or priority conflicts. This article will explore what CSS order and priority are and how they affect styling web pages.

Priority

The browser determines which CSS property values ​​are relevant to the element. This rule is based on how CSS selectors compose different types of rules. Priority is the exact name that gives weight to a specific CSS declaration. The weight or "importance" of each declaration is determined by multiple selector types equal to the matching selector. (Recommended reading: How to calculate css priority? and css style priority order)

Priority only Applicable only when an element has multiple declarations, the target element will take precedence based on the inherent value of the selector. Here is a list to measure the difference in selector values:

Type Selector: This will be a pseudo element or a
class like h1, h1, etc. Class Selectors: These include attribute selectors and pseudo-classes like: hover etc. ID Selector: Any type of ID selector.

Universal selectors have no effect on priority, and some of them include combining selectors like ( , - , > , ~ ). We mentioned before that inline styles (such as bold) will always override styles in external style sheets and be at the top of the chain with the highest priority.

There are some rules you should be aware of before proceeding. In inline css, style attributes of html are first and foremost rules in styles and css files. Specific selectors will also take precedence over less specified selectors. Code later in the document will overwrite any previous roles previously set.

Notice:! importantExceptions

The exception to all these specificity rules is when you call! important method. When it is called, it overrides all other declarations. While this works, it's generally bad practice. It breaks the natural cascade in the worksheet and makes debugging difficult. The best practice to avoid using it is simple. First, you need to look at the specificity rules to see precedence before another style element. If you must use it! important, use it wisely by applying it only to a single page.

Cascadeability

You can do better with Cascade than with! important method. For anyone not familiar with the basic aspects of CSS or Cascading Style Sheets, cascading is the algorithm of how to combine the values ​​of different properties together.

Cascading works by first finding all CSS declarations that are being applied to an element or attribute. It starts with its origin (where it was declared) and then the importance of the declaration. It will then calculate the specificity. Any CSS embedded in an HTML file will follow the external style sheet, regardless of order. It is important to realize the steps that the cascade will take.

In general, if there is a conflict between competing style elements, specificity issues need to be considered. If an element behaves the same way as it would if you didn't code it, then it's inheriting styles from something with higher priority. Start your styling with minimal specificity to ensure this problem doesn't occur.

The above is the detailed content of An introduction to CSS priority order. For more information, please follow other related articles on the PHP Chinese website!