Although you think the reason may be a browser problem, it is more likely that your style definition is incorrect order. 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. If two selectors are applied to the same element, selectors with higher specificity will win and have priority. For example:
P.hithere {color: green;} /* specific = 1,1 */P {color: red;} /* specific = 1 */
Any paragraph content with class class=hithere is displayed in green instead of red. Both selectors have color set, but selectors 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 specific weighting value:
A:link {color: blue;} /* specific = 1,1 */A:active {color: red;} /* specific = 1,1 */A:hover {color: magenta;} /* specific = 1,1 */A:visited {color: purple;} /* specific = 1,1 */
These are style settings for hyperlinks. In most cases, several of these styles need to be set at the same time. For example, an unvisited hyperlink can be set in different styles in both mouse hover and mouse activation when hovering and clicking. Since the above three rules can 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 displayed because it is always covered by the hover style (i.e. hover is preferred). Now let's analyze what the effect of the hyperlink mouseover that has been visited is, and 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 swapped, because a hyperlink cannot exist at the same time as both unreached and accessed states. (:link means unvisited; I don't know why it is not defined like this.)
CSS2 now allows pseudo-classes to appear in union groups, for example:
A:visited:hover {color: maroon;} /* specific = 2,1 */A:link:hover {color: magenta;} /* specific = 2,1 */A:hover:active {color: cyan;} /* specific = 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 be understood as a number string that is not simply connected 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 decimal algorithms. For example, if you use 15 selectors together, their specific weighted values are still lower than simple class selectors. For example:
.hello {color: red;} /* specific = 10 */HTML BODY DIV UL LI OL LI UL LI UL LI UL LI UL LI LI (color: green;} /* specific = 15 */
10 is actually a specificity that follows 1 and then zero, not ten. We can use hexadecimal to describe the previous style rules, like the following:
.hello {color: red;} /* specific = 10 */HTML BODY DIV UL LI OL LI UL LI UL LI UL LI UL LI LI (color: green;} /* specific = 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 specific 17 that will be confused again. In fact, the specificity may be infinite, so to avoid more confusion, it is recommended to use commas to separate the specific value.
Webmaster suggests: Repeat the calculation of the weighted value of specificity. The setting of the 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, and come to Wulin.com more! If you like this site, promote it on your behalf! Thanks for reading.