About css cascading_html/css_WEB-ITnose

“When determining which values ​​should be applied to an element, user agents must consider not only inheritance, but also the declared specificity, in addition to The source of the declaration itself is called cascading. "??"The Definitive Guide to CSS"

Specificity

内联样式	1,0,0,0
ID	0,1,0,0
类、属性选择、伪类	0,0,1,0
标签、伪元素	0,0,0,1
结合符、通配符	0,0,0,0

1 html>body table tr[id="totals"] td ul >li {color:maroon;}/*0,0,1,7*/2 li#answer {color:navy;} /*0,1,0,1 (winner)*/

Note: !important is an important statement and always takes precedence over non-important statements.

Inherits

Most box model properties (including Margins, padding, background, and borders) are not inherited.

The inherited value has no speciality, not even 0 speciality (wildcard).

The user agent’s hyperlink a has a default style and will not be inherited. If you need to modify it, you need to write an additional a:link{color:inherit;} to cover the original blue.

demo

1 <style type="text/css">2     *{color:gray;}3     #page{color:blue;}4 </style>

1 <h1 id="page">This is <em>central line.</em></h1>

Note: This demo also illustrates the indiscriminate use of Inheritance problems caused by matching selectors.

Weight and Source

The 5-level statement weights in descending order are as follows :

Important statement from readers
Important statement from creative staff
Normal statement from creative staff
Normal statement from readers
User Agent Declaration

If two rules have exactly the same weight, source, and specificity, then the one written later wins. Rules contained in the document have higher weight than imported rules (@import).

Therefore, the recommended link style order is LVHA (:link,:visited,:hover,:active). When setting styles for the same attribute (such as color), writing in the order of AHLV will not have the effect of hovering and responding, because the link will find :link first and ignore AH directly. Of course, if you use the combined pseudo-class (:visited:hover), you don’t have to worry about this problem.

Cascading Rules

Source>Specificity>Declaration Order (Main Stylesheet>Import Stylesheet)>Inheritance

Reference materials

"The Definitive Guide to CSS" Chapter 3 Structure and Layering