On the inheritance of CSS

CSS is the abbreviation for Cascading style sheets (cascading style Sheets), whose specifications represent a unique development phase in internet history. Now for the web-making friends, rarely have heard of CSS, because in the process of making Web pages we often need to use.

The continuation of the so-called CSS means that the tag being wrapped inside will have the style properties of the external tag. The most typical application of the continuation feature is usually the style preset for the entire page, which needs to be specified as part of the other style in the individual element. This feature can provide web designers with a more ideal space to play. But at the same time continue to have a lot of rules, the application of the time is easy to confuse people, today is dedicated to talk about this application.

One, continue

One of the main characteristics of CSS is to continue, it is dependent on the ancestor-descendants of the relationship. continues to be a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a color value defined by a body is also applied to the text of a paragraph. The following examples illustrate:

Style definition:

body{color:red;}

Application example code:

＜p＞CSS的＜strong＞层叠和继续＜/strong＞深入探讨＜/p＞

The result of this code is: "CSS layering and further probing" is a red color, "cascade and Continue" is bold because of the application of the strong element. This fits the creator's intent and is why it continues to be part of the CSS.

Second, the limitations of CSS continued

In CSS, continuing is a very natural behavior, we do not even need to consider whether to do so, but continue to have its limitations.

First, some properties are not allowed to continue. There is no reason for this, just because it is so set. For example: The border attribute, as we all know, border property is used to set the border of an element, it does not continue. Most border class properties, such as padding (padding), Margin (boundary), background, and border properties are not allowed to continue.

Third, the continuation of easy to cause errors

Sometimes it can be a mistake to continue, for example, the following CSS definition:

Body{color:blue}

In some browsers, this definition makes text other than tables blue. Technically, this is not true, but it does exist. So we often need to use some techniques, such as defining CSS as this:

Body,table,th,td{color:blue}

The text in the table will also turn blue.

Four, a variety of styles mixed application

Now that there is a continuation, there may be some readers in the stylesheet that are confused and what happens when multiple style sheets are applied to an object. Let's give you a simple example:

Style definition:

. apple{color:red;} H1{color:yellow;}

Application example code:

＜h1 class="apple"＞这儿的苹果好红啊＜/h1＞

Application example: Because the selector H1 and. Apple all match the H1 element above, which one does the browser apply to? By looking in the browser, we found that the text applied the. Apple style, so it shows red. This is because the extraordinary nature of the two rules is not the same, CSS rules must be handled this way.

The extraordinary nature of the stylesheet describes the relative weights of the different rules, and its basic rule is:

Number of ID attributes in the statistics selector.

The number of class attributes in the statistics selector.

The HTML tag name format in the statistics selector.

Finally, write three numbers in the correct order, without spaces or commas, and get a three-digit number. (Notice that you need to convert the number to a larger number that ends at three digits). The final list of numbers corresponding to the selector can easily determine that higher numeric attributes are above the lower digits.

The following is a list of the selectors sorted by attribute:

h1 {Color:blue;} The attribute value is: 1

P em {color:purple;} The attribute value is: 2

. apple {red;} The attribute value is: 10

p.bright {Color:yellow} attribute value is: 11

P.bright Em.dark {color:brown;} The attribute value is: 22

#id316 {Color:yellow} attribute value is: 100

From the table above we can see that #id316 has a higher extraordinary nature, so it has a higher weight. When more than one rule can be applied to the same element, the higher the weight of the style will be taken precedence.