Style type

  1. row
  • Write CSS styles directly on the tag
  1. external
  • External style files are introduced via link
  1. inline
  • Write via style with page inside the head tag

CSS selector type

  1. ID# id
  2. Class. The class
  3. Label p
  4. General *
  5. Attributes (type = “text”]
  6. Pseudo classes: hover
  7. Pseudo elements: : first – line
  8. Child selector, adjacent selector

Weight calculation rules

  1. First: represents the inline style, such as: style= “”, weight is 1000.
  2. Secondary: represents an ID selector, such as #content, with a weight of 0100.
  3. Third class: represents classes, pseudo-classes, and attribute selectors, such as.content, with a weight of 0010.
  4. Fourth grade: represents type selectors and pseudo-element selectors, such as div P, with weight 0001.
  5. Wildcard, child selector, adjacent selector, etc. For example, *, >, +, the weight is 0000.
  6. Inherited styles have no weights.

Compare the rules

  1. Each selector has a weight, and the larger the weight, the higher the priority;
  2. When weights are equal, the later style sheet Settings are superior to the earlier style sheet Settings;
  3. The creator rules over the viewer: the CSS style set by the web writer takes precedence over the style set by the browser;
  4. The inherited CSS style is inferior to the CSS style specified later;
  5. Marked in the same set of property Settings! The important rule has the highest priority
  6. Wildcard, child selector, adjacent selector, etc. Although the weight is 0000, it takes precedence over the inherited style.

! important

  1. ! Important raises the priority, in other words. The style with this sentence has the highest priority (even higher than inline styles).
  2. This function of important is well supported by IE7 + and other browsers. Only IE6 has bugs