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 styleThe 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
|
|
|
Here are some of the priorities I have shown above: 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= "</div>. This style property is actually the inline style.
<div id= "article" style= "" >itdriver.cn</div> |
then our div background turns yellow.
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 style to tags with ID article */#article{font-size:0.8em; Float:right;} |
When we run the example, we find that the div's background is still yellow, but our font size is set by #article (because the inline style does not set the font size). This explains the style that the inline style > ID selector applies .
next to the ID selector, we apply the class selector style
/* Apply style to tags with ID article */#article{font-size:0.8em; Float:right;} /* Apply a style to all tags that specify container as class */. Container{font-size:0.5em; border:1px solid Red;} |
This is what we found, in addition to the div added a yellow border, the div background color is still the inline style set of yellow, 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 style to tags with ID article */#article{font-size:0.8em; Float:right;} /* Apply a style to all tags that specify container as class */. Container{font-size:0.5em; border:1px solid Red;} Div {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.
Reprinted from the actual combat Internet: http://www.itdriver.cn/html/2014/08/03/9.html
CSS in the selector priority order in the real-combat explanation