Easy Tutorial
❮ Linux Useful Command Hbuilder Intro ❯

CSS Style Priority

Category Programming Techniques

When creating increasingly complex style sheets, the style of a tag will be influenced by more and more factors, which may come from surrounding tags or from the tag itself. Let's look at the priority of CSS styles from these two aspects.

CSS Inheritance

The inheritance feature of CSS refers to the CSS properties applied to a tag being passed on to its child tags. Look at the following HTML structure:

<div>
    <p></p>
</div>

If the <div> has a property color: red, then this property will be inherited by <p>, meaning <p> also has the property color: red.

From the above, it can be seen that when the web page is relatively complex and the HTML structure is nested deeply, the style of a tag will be greatly influenced by the styles of its ancestor tags. The rule of influence is:

CSS Priority Rule 1: The style of the nearest ancestor is more prioritized than other ancestor styles.

Example 1:

<!-- The div with the class name son has a color of blue -->
<div style="color: red">
    <div style="color: blue">
        <div class="son"></div>
    </div>
</div>

If we call the properties inherited from ancestors that a tag does not have "ancestor styles," then "direct styles" are the properties that a tag directly possesses. There is another rule:

CSS Priority Rule 2: "Direct styles" have a higher priority than "ancestor styles."

Example 2:

<!-- The div with the class name son has a color of blue -->
<div style="color: red">
    <div class="son" style="color: blue"></div>
</div>

Selector Priority

The above discussion was about the properties inherited from ancestors by a tag. Now let's discuss the properties of the tag itself. Before discussing CSS priority, let's talk about the 7 basic CSS selectors:

-

ID selector, such as #id{}

-

Class selector, such as .class{}

-

Attribute selector, such as a[href="segmentfault.com"]{}

-

Pseudo-class selector, such as :hover{}

-

Pseudo-element selector, such as ::before{}

-

Tag selector, such as span{}

-

Universal selector, such as *{}

CSS Priority Rule 3: Priority relationship: Inline style > ID selector > Class selector = Attribute selector = Pseudo-class selector > Tag selector = Pseudo-element selector

Example 3:

// HTML
<div class="content-class" id="content-id" style="color: black"></div>

// CSS
#content-id {
    color: red;
}
.content-class {
    color: blue;
}
div {
    color: grey;
}

The final color is black because the inline style has a higher priority than other selectors.

All CSS selectors are composed of the above 7 basic selectors or combinations, and there are 3 ways to combine:

-

Descendant selector: .father .child{}

-

Child selector: .father > .child{}

-

Adjacent selector: .bro1 + .bro2{}

When a tag is selected by multiple selectors at the same time, we need to determine the priority of these selectors. We have the following rule:

CSS Priority Rule 4: Calculate the number of ID selectors in the selector (a), calculate the sum of the number of class selectors, attribute selectors, and pseudo-class selectors in the selector (b), and calculate the sum of the number of tag selectors and pseudo-element selectors in the selector (c). Compare the sizes in order of a, b, and c, and the larger one has a higher priority. If they are equal, compare the next one. If the last two selectors have the same a, b, and c in the selectors, judge according to the "nearest principle."

Example 4:

// HTML
<div id="con-id">
    <span class="con-span"></span>
</div>

// CSS
#con-id span {
    color: red;
}
div .con-span {
    color: blue;
}

According to Rule 4, the color of <span> is red.

What would happen if there is a conflict between the styles in the external style sheet and the internal style sheet? This depends on the position of the style sheet in the HTML file. The lower the position where the style is applied, the higher the priority, which can still be explained by Rule 4.

Example 5:

``` // HTML <link rel="stylesheet" type="text/css" href="style-link.css"> <style type="text/css"> @import url(style-import.css); div { background: blue; } </style>

❮ Linux Useful Command Hbuilder Intro ❯