Super examples explain the application of four states of super connection in detail

Q:

I've used CSS to define the style of hyperlinks, but hover (hover) doesn't work when browsing. Why is that? Is it a browser problem?

For:

Although you may think it is a browser problem, it is more likely that your style definition is in a wrong 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" (abbreviated).

Core content:

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

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

Any paragraph formatted with the class Class=hithere is displayed in green instead of red. All two selectors are set, but the selector with a higher specificity will prevail.

How does pseudo class affect specificity? They have exactly the same weighted values, and the following styles have the same specificity weighted 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 that are used for hyperlinks. In most cases, you need to set several of these styles at the same time. For example, a hyperlink that is not accessed can set different styles in both mouse hover and mouse activation situations when you hover and click, since all three rules apply 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" first). Now, let's analyze what the hyperlink mouse hover is, and the result is always purple purple: (because its "visited" style always takes precedence over other state style rules, including "active" and "hover").

This is why the CSS1 recommended style order:

A:link
a:visited
A:hover
A:active

In fact, the order of the first two styles can be reversed, because a hyperlink cannot have both "not accessed" and "accessed" states. (: Link means "unvisited"; I don't know why I don't define it.)

CSS2 now allows pseudo classes to appear in a "federated group" form, such as:

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, and so don ' t beasts. You can get hover-active combinations, for example.

How to understand the "specificity" involved in this article? Specificity can understand the number string that is not simply connected together, an example above:
P.hithere {Color:green}/* specificity = 11 * *
P {color:red}/* specificity = 1 * *

This is like a decimal based simple operation. However, the calculation "specificity" Cannot use decimal algorithms, such as whether you use the 15 choices fonts together, they have a "specificity" weighted value or 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 "0", not "ten", and we can use hexadecimal to describe the specificitiy of the preceding style rule, as follows:

. 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 "17" specificity, and you'll be confused again. In fact, specificity may be infinitely large, so to avoid more confusion, it is recommended to use commas to separate specificity values.

Webmaster Recommendations: Repeated practice of specificity weighted value of the calculation, Web site CSS settings reflect your ability to control the page, in the Dynamic Web site development, the status of CSS is also very important, see more information, more practice, more to web teaching network! If you like this site on behalf of the publicity bar! Thanks for reading.