CSS in the selector priority order in the real-combat explanation

Some of our program apes have some questions about how to apply styles to an element, such as a Div, and why the style I write in the back doesn't cover the previous style, not that CSS is a cascading style sheet?

If you also encounter the same problem in development, that is, when you apply a style to an element (such as in an external style sheet), the style that is written on it cannot overwrite the previously defined style. At this point, you may have to consider whether you have not considered the priority issue.

When we are giving a tag, like a div application style, we have to consider the priority issue.

The following list is the priority of the selector:

inline style > ID selector style > category selector style > tag Selector style

The tag selector is like a broader concept, then to the category selector, to the ID selector, and finally to the inline style, constantly accurate, so the more accurate, the higher the priority. For example, the following box model:

I am the tag Selector div I am the category selector. Container I am the ID selector #article I'm a style in line

I'll prove each of these priorities:

For example, there is a div tag on the page that has the corresponding ID and class attributes, as shown below

<div id= "article" >itdriver.cn</div>

Now let's apply the inline style to it first.

inline style: The style that is applied directly to the element. such as <div style= "Background-color:yellow"></div>. This style property is actually the inline style.

<div id= "article" style= "Background-color:yellow;" >itdriver.cn</div>

Then our div background becomes the * * *.

We then use the ID selector to set the style of the Div.

ID Selector: the so-called ID selector, is that we in the style sheet, through a #id to the element directly applied style, we see the following code, is how to give a specific ID element to apply the style;

/* Apply a style to a label with ID article */ #article { Background-color:grey; Font-size:0.8em; Float:right; }

When we run the example, we find that the div's background is still * * *, but our font size is set by #article (because the inline style does not have a font size set). This explains the style that the inline style > ID selector applies .

Next to the ID selector, we apply the class selector style

/* Apply a style to a label with ID article */ #article { Background-color:grey; Font-size:0.8em; Float:right; } /* Apply a style to all tags that specify container as class */ . Container { background-color:red; Font-size:0.5em; border:1px solid red; }

This is what we found, in addition to the DIV added a * * * border, the div background color is still the inline style settings, the font size is set in #article. Thus we can find that although the. Container is written under #article, but does not overwrite the already defined style, this proves: inline style > ID selector style > class selector style

Finally, apply a tag Selector style

/* Apply a style to a label with ID article */ #article { Background-color:grey; Font-size:0.8em; Float:right; } /* Apply a style to all tags that specify container as class */ . Container { background-color:red; Font-size:0.5em; border:1px solid red; } Div { Background-color:white; Font-size:1em; BORDER:2PX solid black; Color:green; }

We will find that only the color of the font has changed, the other style is the previous style, which means that the tag selector does not overwrite the previous class selector, the ID selector and the defined style within the line. This proves the following: inline style >id selector > class selector > tag Selector.

welcome everyone to join the Internet Technology Exchange Group:62329335  

Personal statement: Share the blog, absolutely original, and strive to each knowledge point through the actual demonstration to verify.

This article is from the "http://itdriver.blog.51cto.com/9109476/1535131" blog, please be sure to keep this source.