preface

Usually when we set the styles of some pseudo-classes (Link, visited, Hover, active) of links, we need to set the styles of these pseudo-classes in a certain order to make different states display the correct styles. Here I will introduce it in the order recommended by CSS2 specification, namely link-visit-hover-active, which can be remembered as love-hate.

To understand why this is the order, first we need to know that CSS often considers not only inheritance but also the specificity of the declaration and the origin of the declaration itself when determining which styles to apply to an element, a process known as cascading. Let’s take a look at the relationship between the three mechanisms of particularity, inheritance, and cascade.

particularity

In practice, we all know that an element can be selected using multiple selectors, such as ID selectors, class selectors, etc. See CSS selectors for details. Let’s call it a rule. Consider the following three pairs of rules, each of which selects the same element:

/* rule 1 */ h1 {color: red; } body h1 { color: purple; } /* rule 2 */ h2. Grape {color: purple; } h2 { color: silver; } /* rul3 */ HTML > body table tr[id="totals"] TD ul > li {color: totally; } li#answer { color: navy; }Copy the code

Obviously, only one of each pair of rules wins, because only one color can be matched. So how do you know which rule is stronger?

The answer lies in the specificity of each selector. By calculating the specificity value of the selector, the rule with the highest specificity will win out and be exploited. Here is a reserved question, if the two rules of equal particularity how to determine the application? I’ll talk about cascading later.

Special value

The particularity value is expressed in four parts, such as: 0,0,0,0. The specific particularity of a selector is determined as follows:

1. For each ID attribute given in the selector, add 0,1,0,0.
2. For each class attribute value, attribute selection, or pseudo class given in the selector, add 0,0,1,0.
3. For each element and pseudoelement given in the selector, add 0,0,0,1.
4. Combinators and wildcard selectors*It doesn’t contribute anything to particularity. Plus 0,0,0,0.
5. The inline style has particularity of 1,0,0,0, so the inline declaration has the highest particularity.
6. Mark is! importantThe declaration does not have a special particularity value. In this case, the declaration is important and exceeds all non-important declarations.

Through the above introduction, we can calculate the particularity values and applied rules of the three groups of rules introduced at the beginning of this section:

/* rule 1 */ h1 {/* 0,0,0,1 */ color: red; } body h1 {/* 0,0,0,2 (elements apply this rule) */ color: purple; } /* rule 2 */ h2. Grape {/* 0,0,1,1 (element applies this rule) */ color: purple; } h2 {/* 0,0,0,1 */ color: silver; } /* rul3 */ HTML > body table tr[id="totals"] td ul > li {/* total = 0,0,1,7 */ color: totally; } li#answer {/* 0,1,0,1 (element applies this rule) */ color: navy; }Copy the code

inheritance

Based on inheritance, styles are applied not only to the specified element, but also to its descendants. The following example will help you understand how inheritance works:

// CSS ul { color: red; } / / HTML < div > < ul > < li > the first under the ul li < / li > < li > the second under ul li < / li > < li > the third li under the ul < / li > < / ul > < ol > < li > first under the ol li < / li > < li > ol the second li < / li > < li > ol the third li < / li > < / ol > < / div >Copy the code

Effect:

The principle is that it will declare color: red; When applied to a UL element, the element takes the declaration. The value is then propagated down the document tree to descendant elements and inherited until there are no more descendant elements to inherit the value. Values are never propagated upward, that is, elements do not pass values upward to their ancestors.

Important: inherited values have no particularity at all, so the particularity values of 0,0,0,0 are higher, indicating that inherited values can easily be replaced by declarations in other ways.

cascading

In the section on particularity we reserve a question: how can two rules be determined to apply if particularity is equal? Assume the following rules:

h1 {
    color: red;
}
h1 {
    color: blue;
}
Copy the code

Which will have the upper hand? The particularity of both rules is 0,0,0,1, so they have equal weight and should both be applied to elements, but this is impossible because an element cannot be both red and blue (it is actually blue). So here’s where cascading comes in. Let’s look at the cascading rules:

The following describes the last three rules.

Sort by weight and source

According to the second rule, if two style rules apply to the same element, and one of the rules has! Important flag, this important rule will win.

p { color: gray ! important; } <p style="color: black;" >Well, <em>hello<em> there! </p>Copy the code

Effect:

Well, hello there!

Also, consider the source of the rule. The order of source weight from large to small is:

1. Important statements from readers (yes! important)
2. Important statement by the creative staff (yes! important)
3. Normal statement from the creator
4. Reader’s normal statement
5. User agent Statement

Order by particularity

According to the third rule, if multiple conflicting declarations are applied to an element and they all have the same weight, they are sorted by particularity, with the most special declarations taking precedence.

p#bright { color: silver; } p { color: black; } <p id="bright">Well, hello there! </p>Copy the code

Effect:

Well, hello there!

Sort in order

Finally, according to rule 4, if two rules have exactly the same weight, source, and particularity, the one that comes later in the stylesheet wins.

h1 { color: red; } h1 { color: blue; } <h1> I'm blue header 1</h1>Copy the code

Effect:

I’m title 1 in blue

Link style order

Now, with that introduction, I think you have a basic idea of how CSS determines which values should be applied to an element. Going back to the link style order mentioned in the introduction, in order to properly represent the style set, we must set the style in a certain order. According to the order of recommendation in CSS2 specification, namely link-visit-hover-active, the declaration style is as follows:

:link {
    color: blue;
}
:visited {
 color: purple;
}
:hover {
    color: red;
}
:active {
    color: orange;
}
Copy the code

From the previous introduction, the particularities of the above selectors are the same: 0,0,1,0. So they have the same weight, source, and specificity, so the last selector that matches the element wins.

Unvisited links that are “clicked” can match three of these rules — :link, :hover, and :active, so in the order declared above :active wins, which is probably what we expect.

Suppose we ignore the usual order and instead arrange the link styles alphabetically, declaring them as follows:

    :active {
        color: orange;
    }
    :hover {
        color: red;
    }
    :link {
        color: blue;
    }
    :visited {
     color: purple;
    }
Copy the code

In this order, no links will display :hover or :active, because :link and :visited appear after the rules. All links must be either :visited or unvisited, so :link and :visited styles will always override :hover or :active.

Of course, link styles can also be set in a certain order according to their actual needs, such as link-hover-visit-active. The effect is that only unvisited links have hover styles, while visited links do not.

Finally, because you can link pseudo-classes together, you don’t have to worry about these problems. The following rules can be listed in any order without fear of negative effects:

:link {
    color: blue;
}
:visited {
 color: purple;
}
:link:hover {
    color: red;
}
:visited:hover {
    color: gray;
}
:link:active {
    color: orange;
}
:visited:active {
    color: silver;
}
Copy the code

conclusion

By explaining why the link style order is link-visited-hover-active, I hope to help you understand some of the basics of CSS when deciding which styles to apply to an element.

Please indicate the source of reprint, thank you!