The "Love and hate" principle of a tag style in CSS

CSS prepares specific tools for some special effects, which we call "pseudo-classes". Several of which are commonly used, let's look at the four pseudo-classes that are often used to define link styles, namely:

1:link2:visited3:hover4:activebecause we want to define the link style, it is essential that the anchor tag in the hyperlink is--a, the anchor tag and the pseudo-class link up the writing method is the basic method of defining the link style, they are written as follows:1 a:link, define the style of the normal link;2 a:visited, defines the style of the link that has been visited;3 a:hover, defines the style when the mouse hovers over the link;4 a:active, defines the style when the mouse clicks the link. Example:A:link {color: #FF0000;Text-decoration:underline;* }a:visited {color: #00FF00;Text-decoration:none;(On } theten a:hover {One color: #000000;Text-decoration:none;- } -a:active {color: #FFFFFF;Text-decoration:none;(+ }The link color defined in the example above is red, the link after the visit is green, the mouse hovers over the link is black, and when clicked, the color is white.  if normal links and visited link styles are the same, the mouse hover and the style of the click are the same, you can also merge them together to define:1 A:link, a:visited {2 color: #FF0000;3 text-decoration:underline;4}5 a:hover, a:active {6 color: #000000;7 Text-decoration:none;8}Order of link definitions no rules inadequate surrounding area, although the link definition is written, but it is also a regular, if the four items of the writing order slightly wrong, the effect of the link may not be, so every time you define the link style, be sure to confirm the definition of the order, link--visited--hover-active, That's the love hate principle we often talk about (capital letters are their initials).  The foreigner summed up a memorable "love and Hate Principle" (love/hate), that is, four kinds of pseudo-class initials: LVHA. Defines the correct order for a link style: A:link, a:visited, A:hover, a:active.  Why can't we change the order of the definitions? You can do the test.  Let 's say we want to implement the following style: State style colorvisited a:visited Rednot visited A:link Blueselected A:active Greenmouse move into a:hover yellowWhen the mouse is moved, it does not turn yellow. Instead, when the link has been accessed, the mouse is moved in to become yellow:1 a:visited{color:red;}2 a:hover{color:yellow;}3 a:link{color:blue;}4 a:active{color:green;}this is because a mouse through the non-access link has a:link,a:hover two properties, in the above CSS style, a:link from his recent, first meet A:link, and discard a:hover duplicate definition.  after using the LVHA sequence declaration, it first checks the A:hover's compliance criteria before changing color.  so, in order to conform to the browser to interpret the "nearest principle" CSS follows. In the definition of CSS, it is advisable to put the most general conditions on the top, and then down, the most special on the bottom.  in the specification, the declaration order of links is also specified: In CSS definitions, a:hover must be placed after A:link and a:visited to be valid. In the CSS definition, a:active must be placed after a:hover to be valid. define a local link style The definition of a:link{} in CSS will change the link style of the whole page, but some local links need to be specialized, this problem is not difficult to solve, as long as the link style definition is preceded by the specified ID or class. 1 #sidebar a:link, #sidebar a:visiteid {2 color: #FF0000;3 text-decoration:none;4}5 #sidebar a:hover, #sidebar a:active {6 color: #000000;7 text-decoration:underline;8}HTML calls:1

<div id="sidebar"><a href等于"aa.aspx"target="_blank">链接到aa页面<a></div>

class is defined in the same way as the ID, as long as the #sidebar is changed to. Sidebar, there is also a way to directly define the style of the link, which is more straightforward, but the call is more cumbersome, you need to give each specific link to define the code. 1 a.redlink a:link, A.redlink a:visiteid {2 color: #FF0000;3 text-decoration:none;4}5 a.redlink a:hover, A.redlink a:active {6 color: #000000;7 text-decoration:underline;8 background: #FFFFFF;9}

The "Love and hate" principle of a tag style in CSS