Detailed explanation of the application of the four states of hyperconnection

Although you think it may be a browser problem, it is more likely that the order of your style definitions is wrong. In order to ensure that you can see the connection styles in different states, the correct style order should be:

"link-visited-hover-active" or "LVHA" (abbreviation).

Core content:

Each selector has a "specificity" and if two selectors are applied to the same element, the selector with the higher specificity will win and take precedence. For example:

P.hithere {color: green;} /* specificity = 1,1 */ P {color: red;} /* specificity = 1 */

Any paragraph content with class=hithere set will appear green instead of red. Both selectors set the color, but the selector with higher specificity wins.

How do pseudo-classes affect specificity? They have exactly the same weighting values, and the following styles have the same specificity weighting values:

A:link {color: blue;} /* specificity = 1,1 */A:active {color: red;} /* specificity = 1,1 */A:hover {color: magenta;} /* specificity = 1,1 */A:visited {color: purple;} /* specificity = 1,1 */

These are the style settings for hyperlinks. In most cases, you need to set several of these styles at the same time. For example, an unvisited hyperlink can have different styles for "mouse over" and "mouse activated" when the mouse is hovered over and clicked. Since the above three rules can all be applied to hyperlinks and all selectors have the same specificity, the last style "wins" according to the rules. So the "active" style will never be shown because it is always overwritten by the "hover" style (i.e. "hover" takes precedence). Now let's analyze what happens when you hover over a visited hyperlink. The result is always purple :(, because its "visited" style always takes precedence over other state style rules (including "active" and "hover").

This is why CSS1 recommends the following order of styles:

A:linkA:visitedA:hoverA:active

In fact, the order of the first two styles can be swapped, because a hyperlink cannot exist in both the "unvisited" and "visited" states at the same time. ( :link means " unvisited "; I don't know why it's not defined that way.)

CSS2 now allows pseudo-classes to appear in "groups", for example:

A:visited:hover {color: maroon;} /* specificity = 2,1 */A:link:hover {color: magenta;} /* specificity = 2,1 */A:hover:active {color: cyan;} /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

How do you understand the "specificity" involved in this article? Specificity can understand strings of numbers that are not simply concatenated together. An example above: P.hithere {color: green;} /* specificity = 11 */ P {color: red;} /* specificity = 1 */

This seems to be a simple operation based on decimal. However, the calculation of "specificity" cannot use the decimal algorithm. For example, if you use 15 selectors together, their "specificity" weight value is still lower than that of a simple class selector. Example:

.hello {color: red;} /* specificity = 10 */ HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = 15 */

"10" is actually a "1" followed by a "zero", not a "ten". We can use hexadecimal to describe the specificitiy of the previous style rule, like this:

.hello {color: red;} /* specificity = 10 */ HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */

The only problem is if you want to add two or more selectors to the second style rule, then you might end up with a specificity of "17", which would be confusing again. In fact, the specificity may be infinite, so in order to avoid more confusion, it is recommended to use commas to separate the specificity values.

Webmaster's suggestion: Practice calculating the weighted value of specificity repeatedly. The CSS settings of the website reflect your ability to control the page. In the development of dynamic websites, the status of CSS is also very important. Read more materials, practice more, and come to 123WORDPRESS.COM more often! If you like this site, please promote it! Thanks for reading.