Shulou(Shulou.com)06/02 Report--

This article focuses on "how css3 changes cascading". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how css3 changes cascading.

In css3, you can use the "! important" rule to change cascading, which is used to increase the weight of a specified style, thus changing the cascading of the style. The syntax is "selector {attribute: value! important;}".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

What is cascading?

Cascading is a feature of browsers that handle conflicts. If an attribute is set to the same element through multiple selectors, only one selector will work, and all the other selectors will be cascaded out.

Definition: the same selector sets the same style, and one style overrides the other conflicting style.

Function: solve the problem of style conflict.

Cascading principle: when there is a style conflict, follow the nearest principle.

The embodiment of CSS cascading:

1: style does not conflict

/ * multiple selectors select the same element, and the style does not conflict * / .box_one {width:100px; height:100px;} .box_two {background:red;}

In the above code, there is no conflict in the style code, and all styles in the two selectors are superimposed on the element div, and div ends up rendering a red container with a width and height of 100px.

2: conflicting styles

When the style conflicts and the same level is not affected by priority

.box _ one {width:100px; height:100px;}. Box_two {width:200px; background:red;}

In the above code, at the same level (the same element, the same name of the class definition selector), the style code conflicts, and the same width attribute appears in the two selectors, then the last style in the CSS code prevails, and div finally presents a container with a width of 200px, a height of 100px, and a red color.

When there are conflicts in styles and different levels are affected by priority (weight)

CSS specifies the priority of the basic selector from low to high: element (tag) style < category (class) style < ID style < inline style

So which property of css3 changes cascading?

In css3, you can use the "! important" rule to change cascading.

The! important rule in CSS is used to increase the weight of styles.

! important has nothing to do with priority, but it is directly related to the final result, and this declaration will override any other declaration when using a! important rule.

# myid {background-color: blue;}. Myclass {background-color: gray;} p {background-color: red;}

Some of the text in the paragraph! Will show red, because! important function, you can delete the rule to see the effect.

Some of the text in the paragraph! Will show red, because! important function, you can delete the rule to see the effect.

Some of the text in the paragraph! Will show red, because! important function, you can delete the rule to see the effect.

Modify the weight of the p selector style:

P {background-color: red! important;}

In the above example, although the ID selector and the class selector have higher priority, the background colors of the three paragraphs are displayed in red because the! important rule overrides the background-color property.

At this point, I believe you have a deeper understanding of "how css3 changes cascading". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.