Overlay of "CSS" background

1. Style Overlay Problem description

Phenomenon: Class1 is the DOM node default style, Class2 the DOM node and adds style, discovers Class2 background is Class1 overwrite

Solution: Use!import emphasis in Class2 's background

2. CSS style Overlay principle analysis

1) CSS styles are imported in two ways: a. Outer style--external file B. Inline style--HTML style node, DOM node forced binding

Precedence is inline-dom node force binding > inline-HTML style node > Outreach

2) CSS selector precedence inline style > ID > class= pseudo-class > TagName = Pseudo element

The weights were

Inline: 1000

id:100

class/Pseudo-Category: 10

TagName/For elements: 1

The weights of the descendant selectors are the sum of each weight value.

After the same weight, the loaded CSS file will overwrite the previous loaded

3)!import property is not overwritten

Overlay of "CSS" background