Home > Developer > JavaScript
CSS particularity, inheritance and cascade, css Cascade
I. Special rules
The particularity of the selector is determined by the component of the selector. The particularity consists of four parts, whose initial values are 0, 0, 0.
1. For each id in the selector, record 0, 1, 0, 0;
2. For each class, pseudo class, and attribute in the selector, choose 0, 0, 1, 0;
3. For each element and pseudo element in the selector, record 0, 0, 1;
4. The delimiter and wildcard have no contribution to the particularity of the selector.
Note:
1. the particularity of, is higher than that.
2. the special character of wildcard * is 0, 0, 0, and 0. It has special characteristics. The combination character (such as "+" In h1 + p) has no special characteristics at all, and the inherited style has no special characteristics.
See the following code:
1The page is displayed as follows:
In this example, the <p> element inherits the cyan Color from the <body> element. However, the inherited rule has no special characteristics, and its priority is lower than the zero special, therefore, the <p> element adopts the * Rule and the color is red.
Wildcard character *: * applies to all elements and has a special 0 character, which may lead to inheritance failures inadvertently. Avoid using the * selector whenever possible.
3. the attribute selector of the specified id attribute is essentially different from the id selector, for example:
1Page effect:
In this example, the particularity of div [id = "test"] p is,; and # test p is,; # The selector test p wins, therefore, the font color is cyan.
4. The intra-row style has the highest particularity, which is.
5. Mark! The important statement is called an important statement. It has no special characteristics, but it must be considered separately from the non-important statement.
Specifically, non-important statements are divided into groups, and conflicts between them are resolved in special ways. Important statements are divided into groups to resolve internal conflicts between them. Important statements always give priority to non-important statements.
Ii. Inheritance
1. Inheritance does not have any special characteristics. Remember this to understand many problems.
See the following code:
1Page effect:
Why is the color of the <p> element red, while that of the <a> element blue?
This is not because <a> elements do not inherit the color of the parent element (forgive me for thinking so), but because <a> elements inherit the color of <p> elements, however, the inherited style is not special at all. However, the style is set for the <a> element in the default style of the browser. Obviously, the default style of the browser is more special, therefore, <a> elements are displayed in the default browser style.
2. inheritance in CSS: In general, only child elements can inherit the style of the parent element, that is, the style can only be passed down in the DOM, not up; but there is an exception, the background style applied to the body element can be passed up to the html element, and its canvas can be defined accordingly.
3. One keyword in CSS is shared by all attributes. It makes the value of an attribute the same as that of its parent element.
In most cases, you do not need to specify the inheritance because most attributes are automatically inherited. However, the automatically inherited attributes are not special and are easily overwritten by other styles; when you need to explicitly specify the style of an element to be consistent with its parent element, it is more convenient to use inherit.
Iii. Cascade
Cascade rules:
1. sort by weight. Reader important statement> author General Statement> reader General Statement> User Agent statement.
2. When the weights are the same, they are sorted by particularity. The higher the particularity, the higher the winner.
3. In the case of the same particularity, sort by the order in the style sheet, and then the winner appears.
Btw uses the sequential declaration link style of LoVe-HA because of this rule (LoVe-HA is sequential: link;: visited;: hover;: active ).
Description of external style <internal style <in-row style:
This argument comes from the above 3rd rules. In general, under the
1In this example, the external style sheet contains a rule such as P {color: cyan;}. Its particularity is the same as that of the internal style sheet, however, because the external style table is behind the internal style, the external style wins, and the page is displayed as follows:
So,
External styles <internal styles are just a habit of saying that the key is to look at the order in which they appear. The higher the order, the higher the back priority.
Of course, the intra-row style is always the most backward, so it has a higher priority than the external style and internal style, which is beyond doubt.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
