What are CSS weights

王林
Release: 2020-11-12 09:30:08
Original
3997 people have browsed it

CSS weight refers to the priority of the selector. CSS styles with high priority will override styles with low priority. The higher the priority, the higher the weight. When the weights of CSS selection rules are different, the one with the higher weight will take precedence. When the weights of the CSS selection rules are the same, the rule defined later takes precedence.

What are CSS weights

To know what the weight of CSS is, then we must first understand the 6 basic selectors of CSS styles: ID selector, class selector, attribute selection selectors, pseudo-classes, and object selectors, label selectors, and unified selectors. All selectors defined in CSS styles are composed of these six basic selectors, and the combination methods are also divided into three types: descendant selectors, sub-selectors, and adjacent selectors.

(Related video sharing: css video tutorial)

The weight of CSS refers to the priority of these selectors. CSS styles with high priority will override the priority. For low styles, the higher the priority, the higher the weight, and vice versa.

CSS priority rules:

1. When the weights of the css selection rules are different, the one with the higher weight will take precedence;

2. When the weights of the css selection rules are the same , the rules defined later will take precedence;

3. When !important is added after the css attribute, unconditional absolute priority will be given;

Related recommendations: CSS tutorial

The above is the detailed content of What are CSS weights. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template