[To be sorted] CSS defines the style marked by hyperlink

Learn how to mark hyperlink A. Q: I have used CSS to define the hyperlink style, but hover does not work during browsing. Why? Is it a browser problem? A: Although you think it may be caused by browser problems, it is more likely that the order of your style definitions is incorrect. To ensure that you can see the connection styles in different states, the correct style order should be:

Q:
I have used CSS to define the hyperlink style, but hover does not work during browsing. Why? Is it a browser problem?
A:
Although you think it may be caused by browser problems, it is more likely that the order of your style definition is incorrect. 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. If two selectors are applied to the same element, the selector with a higher specificity wins and has a priority. For example:
P. hithere {color: green;}/* specificity = 1, 1 */
P {color: red;}/* specificity = 1 */
The content of any section with class = hithere set to green rather than red. Both selectors are set with color, but the selector with a higher specificity will win.
How does a pseudo-class affect specificity? They have identical 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 used for hyperlink style settings. In most cases, you need to set several styles at the same time, for example, when hovering and clicking an unaccessed hyperlink, you can set different styles in the "hover mouse" and "Activate mouse" statuses. Because the above three rules can be applied to hyperlinks, and all the delimiters have the same specificity. Then, according to the rule, the last style "wins ". Therefore, the "active" style will never be displayed, because it is always overwritten by the "hover" style (that is, "hover" is preferred ). Now let's take a look at the effect of mouse hover over the accessed hyperlink. The result will always be purple :(, because its "visited" style always gives priority to other State style rules (including "active" and "hover.
This is why CSS 1 recommends the style order:
A: Link
A: visited
A: hover
A: active
In fact, the order of the first two styles can be changed, because a hyperlink cannot have both "not accessed" and "accessed" statuses. (Link means "unvisited". I don't know why it is not defined like this .)
Css2 now allows pseudo classes to appear in the form of "federated 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 can we understand the specificity involved in this article? Specificity can be used to understand the number strings that are not simply connected together. The preceding example is as follows:
P. hithere {color: green;}/* specificity = 11 */
P {color: red;}/* specificity = 1 */
This seems to be a simple Decimal-based operation. However, the "specificity" calculation cannot use the decimal algorithm. For example, if you connect 15 choices, their "specificity" weighting values are still lower than those of simple class delimiters. Example:
. Hello {color: red;}/* specificity = 10 */
Html body Div ul Li ol Li (color: green;}/* specificity = 15 */
"10" is actually a "1" followed by "0", not "10". We can use hexadecimal notation to describe the specificitiy of the preceding style rules, as shown below:
. Hello {color: red;}/* specificity = 10 */
Html body Div ul Li ol Li (color: green;}/* specificity = f */
The only problem is that if you want to add two or more delimiters for the second style rule, then you may get a specificity of "17" and be confused again. In fact, specificity may be infinite. To avoid more confusion, we recommend that you use commas to separate specificity values.
Webmaster suggestion: Exercise specificity's weighted value calculation repeatedly. the CSS settings of the website reflect your ability to control pages. In dynamic website development, the position of CSS is also very important, read more materials and practice! If you like this site, you can publicize it on your behalf! Thank you for reading