Learn Hyperlink A Markup_HTML/Xhtml_Web Page Production

Q:
I have used CSS to define the style of the hyperlink, but hover (mouseover) does not work when browsing. Why is this happening? Is it a browser problem?
Answer:
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 set class class=hithere The paragraph content appears 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 the order of styles:
A:link
A:visited
A:hover
A:active
Actually, the beginning The order of the 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 is not defined this way.)
CSS2 now allows pseudo-classes to appear in the form of "joined 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 characters that are not simply connected together. String, an example above:
P.hithere {color: green;} /* specificity = 11 */
P {color: red;} /* specificity = 1 */
This seems to be a Simple operations based on decimal. However, the decimal algorithm cannot be used to calculate "specificity". For example, if you use 15 selectors together, their "specificity" weighted values ​​are still lower than the 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 "zero", not "ten". We can use hexadecimal to describe the specificitiy 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 if you want the second When you add two or more selectors to a style rule, you might end up with 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: Repeat 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! Thank you for reading