Practical explanation of selector priority order in CSS; css Selector

Practical explanation of selector priority order in CSS; css Selector
When some of our programs apply styles to an element (for example, div), they may have some questions. Why cannot I overwrite the styles that I wrote behind the scenes, isn't css a Cascading Style Sheet? If you encounter the same problem during development, that is, when applying a style to an element (for example, writing it in an external style sheet), the style after writing cannot overwrite the style defined previously. At this time, you may have to consider whether the priority issue is not considered. When we apply a style to a label, such as a div, we need to consider the priority issue. The priority of the selector is listed below:Intra-row style> ID selector style> category selector style> tag selector StyleA tag selector is like a more extensive concept, and then to the category selector, to the ID selector, and finally to the intra-row style. So the more precise, the higher the priority. For example, the following box model:

I am marking the selector div I am a category selector. container I am the ID selector # article I am a style in the row.

Below I will prove the above priorities separately: for example, there is a div tag on the page, which 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. Intra-row style:That is, the style directly applied to the element. For example, <div Style = "</div>. This style attribute is actually a row style. 

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

Then our div background becomes yellow.  Then we can use the ID selector to set the div style. ID selector:The ID selector is used to apply a style directly to an element in the style sheet through a # id. Please refer to the following code to apply a style to an element with a specified ID;

/* Apply the style to the label with the id of article */# Article{Font-size: 0.8em; float: right ;}

When running the example, we will find that the background of the div is still yellow, but we set the font size according to # article (because the font size is not set for the intra-row style ). This indicates:Intra-row style> apply ID selector Style.

Next, under the ID selector, we applyClass SelectorStyle

/* Apply the style to the label with the id of article */# Article{Font-size: 0.8em; float: right;}/* apply the style to all labels that specify the container as the class */. Container{Font-size: 0.5em; border: 1px solid red ;}

We found that in addition to adding a yellow border to the div, the background color of the div is still the yellow color set in the row style, and the font size is set in # article. From this we can find that, although. container is written under # article, it does not overwrite the defined style, which proves:Intra-row style> ID selector style> class selector Style  Apply anotherTag SelectorStyle

/* Apply the style to the label with the id of article */# Article{Font-size: 0.8em; float: right;}/* apply the style to all labels that specify the container as the 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 font color changes, and other styles are the previous styles. This means that the tag selector does not overwrite the front class selector, ID selector, And the defined styles in the row. This proves that:In-row style> ID selector> class selector> tag selector.

Welcome to the internet technology exchange QQ group: 62329335

 

Css selector priority

Is based on the pre-defined order, followed by priority over the previous
For example:
. Aaa {width: 100px ;}
. Aaa {width: 200px ;}
. Bbb {width: 300px ;}

<Div class = "aaa bbb"> </div>
This div will only reference the last width: 300px

Does the jquery selector have a css-like priority? ------ Answer

Hello:

Jquery is executed sequentially;

Hope to help you.