Css tutorial: CSS pseudo class

Source: Internet
Author: User

CSS pseudo-classes are used to add special effects to some selectors.
CSS pseudo classes can be used to add special effects to some selectors.
Hyperlink
How to add different colors to super connections in the document
This example demonstrates how to add different colors to a hyperlink in a document.
Examples instance:

The code is as follows: Copy code
Source Code to Run []
A: link {color: # FF0000}
A: visited {color: #00FF00}
A: hover {color: # FF00FF}
A: active {color: # 0000FF}
This is a link
Note: a: hover MUST come after a: link and a: visited in the CSS definition in order to be valid !!
Note: a: active MUST come after a: hover in the CSS definition in order to be valid !!

[You can modify some code before running it to view the effect]
Hyperlink 2
How to add other styles to a super connection
This example demonstrates how to add other styles to hyperlinks.
Examples instance:

The code is as follows: Copy code
A. one: link {color: # ff0000}
A. one: visited {color: # 0000ff}
A. one: hover {color: # ffcc00}
A. two: link {color: # ff0000}
A. two: visited {color: # 0000ff}
A. two: hover {font-size: 150%}
A. three: link {color: # ff0000}
A. three: visited {color: # 0000ff}
A. three: hover {background: #66ff66}
A. four: link {color: # ff0000}
A. four: visited {color: # 0000ff}
A. four: hover {font-family: monospace}
A. five: link {color: # ff0000; text-decoration: none}
A. five: visited {color: # 0000ff; text-decoration: none}
A. five: hover {text-decoration: underline}
Mouse over the links to see them change layout.
This link changes color
This link changes font-size
This link changes background-color
This link changes font-family
This link changes text-decoration
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.