Detailed explanation of the application of the four states of hyperconnection_HTML/Xhtml_Web page production

Although you think the possible cause is 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 selector has a "specificity". If two selectors are applied to the same element, the selector with higher specificity will win and have priority. For example:

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

Any paragraph content with class=hithere is displayed in green instead of red. Both selectors set the color, but the selector with higher specificity will win.

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

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 styling settings for hyperlinks. In most cases, it is necessary to set several of the styles at the same time. For example, an unvisited hyperlink can set different styles in the two states of "mouse hover" and "mouse activation" when the mouse is hovering and clicking. The above three rules can all be applied to hyperlinks, and all selectors have the same specificity, then according to the rules, the last style "wins". So the "active" style will never be shown because it is always overridden by the "hover" style (i.e. "hover" takes precedence). Now let's analyze the effect of mouseover on a hyperlink that has been visited. 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 style order:

A:linkA:visitedA:hoverA:active

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

CSS2 now allows pseudo-classes to appear in the form of "union 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 to understand the "specificity" involved in this article? Specificity can understand number strings that are not simply connected together. An example above: P.hithere {color: green;} /* specificity = 11 */P {color: red;} /* specificity = 1 */

This seems to be a simple decimal-based operation. However, the decimal algorithm cannot be used to calculate "specificity". For example, if you use 15 selectors together, their "specificity" weighted values ​​will still be lower than those of simple class selectors. 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 "zero", not "ten". We can use hexadecimal to describe the specificity of the previous style rules, like the following:

.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 that if you want to add two or more selectors to the second style rule, then you may get a specificity of "17", which will cause confusion again. In fact, specificity may be infinite, so to avoid further confusion, it is recommended to use commas to separate specificity values.

Webmaster suggestion: Repeatedly practice the calculation of the weighted value of specificity. The setting of website CSS reflects your ability to control the page. In dynamic website development, the status of CSS is also very important. Read more Information, practice more, come to Script Home more! If you like this site, please promote it! Thanks for reading.