The front end surface of priority questions -CSS

A selector priority

Browser via the priority to determine which are most relevant to the attributes of an element, so that the application of these property values on the element. Priority is based on different types of selectors matching rules thereof.

Second, the priority calculation

A priority right is assigned to a specific weight of CSS declarations, each consisting of one selected type of the matching selector value determined.

When equal priority and the priority of multiple CSS declaration any time a statement, CSS in a final statement which will be applied to the element.

When there are multiple declarations of the same element, the priority will be meaningful. Because each act directly on the CSS rule element will always be taken over / cover (take over) the elements of the rules of succession comes from ancestor elements.

Third, the order of priority

3.1 weight value selector

image description

3.2 descending

Inline style> ID selector> type = attribute selector selector = pseudo class selector> element (Type) = pseudo-element selector selectors

3.2 Note

Wild selector (universal selector) (*), the relationship between selectors (combinators) (+,>, ~, '') and negative pseudo-classes (negation pseudo-class) (: not ()) has no effect on the priority . (However, in the : not () declared inside the selector will affect the priority).

Fourth, special! Important rules

4.1 Description

When using a! Important rule in a style statement, this statement will cover any additional claims . Although technically it has nothing to do! Important and priority, but the! Important priority but is directly related to CSS.

4.2 damage cascade rule

Use! Important is a bad habit, should be avoided, because it undermines the inherent rules of cascading style sheet makes debugging becomes more difficult to find a bug. As with the two conflicting! Important declaration rules are applied to the same elements, with greater priority of the declaration will be adopted.

Read extended front end face questions -CSS selector

Guess you like

Origin www.cnblogs.com/jlfw/p/11968221.html