1. Lvha
should actually be lvfha, namely:
a:link {/* 未访问过的超链接的样式 */}
a:visited {/* 访问过的超链接的样式 */}
a:focus {/* 拥有焦点的超链接的样式 */}
a:hover {/* 鼠标悬停的超链接的样式 */}
a:active {/* 被用户输入激活的超链接的样式 */}
These 5 are all pseudo-categories, representing 5 states, among which link and visited are dedicated to hyperlinks and can be classified into link pseudo-categories, while focus, hover and active are applicable to other elements in addition to hyperlinks, called dynamic Pseudo-class
The lvfha principle is that when the above five pseudo-classes are applied to hyperlinks (a tags with href attributes), this fixed order should be observed
2. Pseudo-classes and pseudo-elements
Pseudo-classes are like classes, used to select an element that already exists on the DOM tree. There are two selection conditions:
State: Whether the element is in a certain state, for example, the user has visited (link/visited), has focus at the moment, and is in a certain language environment (lang)
Structure: Does the element meet certain DOM structural requirements, such as the element as the eldest child (first-child), the element as the root element (root) and a lot of structured pseudo-classes (nth - , -Of-type etc.)
Pseudo-elements are more like elements and are used to select elements (or part of an element) that do not exist in the DOM tree. Compared with the prosperous family of pseudo-classes, pseudo-elements seem to be a little lonely. Up to now (2017/11/4), there are still only 4 pseudo-elements in the CSS3 specification (CSS2.1 is 4):
First letter: the first letter of the text content contained in the selected element (the text content contains sub-elements, which means that text can be selected across label levels)
First line: select the first line of the text content contained in the element (same as above)
before: Used for content generation, an element is generated at the beginning of the specified element content (the generated content is located in the element content area)
after: used for content generation, generate an element at the end of the specified element content (same as above)
The biggest difference between a pseudo-class and a pseudo-element is whether the target content to be selected exists on the DOM. The existence is a pseudo-class, and the non-existence is a pseudo-element. From another perspective, if you want to specify a style for a certain part of the document, you must first select this part of the content (through the selector). At this time, you will encounter two situations:
The target content happens to be wrapped by a label, and setting the style of the entire label can achieve the goal
There is no label before and after the target content, and the style cannot be set directly. You need to insert a temporary label to enclose the target content, and then set the style for this temporary label
The first case is handled by pseudo-classes. The pseudo-class selector is used to find out existing elements in a certain state or with certain structural characteristics, and then apply the style. The second case is either to manually insert additional tags and convert to the first case (some scenes cannot be done by adding tags, such as the first line, or scenes across tag levels), or it can be solved by pseudo-elements, which is equivalent to browse Help insert virtual tags to delineate the target content, and then apply the style
PS For more information about CSS3 selectors, please see CSS selector classification summary
Three. The six states of a tag The
lvfha pseudo-class provides five states for hyperlinks, the sixth refers to anchor points, not hyperlinks
One of the meanings of the existence of the link pseudo-class is to distinguish between hyperlinks and anchors. The link pseudo-class only matches a tag with href (that is, a hyperlink), not an anchor
In a general desktop browser environment, the 6 states of the a tag and the corresponding trigger behaviors are:
a {/* 处于任意状态的a标签，不论是超链接还是锚点 */}
a:link {/* 未访问过的超链接 */}
a:visited {/* 访问过的超链接，点击超链接再返回当前页，这个超链接就处于visited状态 */}
a:focus {/* 获得焦点的超链接，tab键选中超链接或者长按超链接再移开鼠标 */}
a:hover {/* 鼠标悬停的超链接，鼠标经过超链接时或悬停在超链接上时，这个超链接就处于hover状态 */}
a:active {/* 处于激活状态的超链接，鼠标在超链接上按下时 */}
Among them, focus, hover, and active are not easy to distinguish. Focus is a continuous state, while hover and active are transient states. If you further subdivide hover and active, the latter is a special state of the former (except for touch devices) ,E.g:
a:focus {border: 1px solid green;}
a:hover {border-color: red;}
a:active {border-style: dashed;}
Then the corresponding states and styles of the following continuous operations are:
按下tab键 -> focus -> 绿色实线边框
点击其它空白处 -> a & link | visited -> 对应样式
鼠标划过时 -> hover -> 无边框
鼠标悬停时 -> hover -> 无边框
鼠标按下 -> focus & hover & active -> 红色虚线边框
鼠标移到超链接之外再抬起 -> focus -> 绿色实线边框
（不点击其它地方的话，超链接将一直处于focus状态）
鼠标划过时 -> focus & hover -> 红色实线边框
Because focus is a continuity state, it should be placed before the transient hover and active, otherwise the hover style will not appear when the mouse is swiped (according to the cascading rules, the hover declared first will be overwritten by the focus)
Because the three states of focus, hover, and active overlap, it is recommended to maintain a specific declaration order so that the cascading result meets the expectations of the stylesheet writer. And link and visited are mutually exclusive, there is no overlap, so the relative order of the two is not important (vlfha is also reasonable, the "love and hate" order is just easy to remember). Similarly, because link/visited is a permanent state, in order to give the transient state and the persistent state a chance to perform, put focus/hover/active behind, and make the cascading priority of the long state lower, so there is lvfha principle
In addition, the specification does not clearly state the start and end conditions for the corresponding states of focus, hover, and active:
CSS does not define which elements can be in the above states, and how these states enter and leave. Scripts can change whether elements respond to user events, and different devices and UAs point to and activate elements in different ways
CSS 2.1 does not define if the parent of an':active' or':hover' element is also in this state
(From 5.11.3 dynamic pseudo-classes: :hover, :active and :focus)
Therefore, it is impossible to determine the trigger behavior of dynamic pseudo-classes, nor can it be determined which elements these pseudo-classes are applicable to (form elements, divs, etc. may or may not be supported), depending on the implementation of the user agent
4. It is
recommended to follow the lvfha order of the combined pseudo-classes to consider the cascading rules, otherwise it may be overwritten, resulting in invalid rules with the same name. E.g:
a:hover {text-decoration: underline overline;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
The hover style (tip: display both the overline and underline when the mouse is over) will never take effect, because the text-decoration attribute will always be overwritten by one of the following two
Of course, the prerequisite is that when the style rules conflict (the attributes of the same name and the source, importance, and specificity are the same), the conflict is resolved according to the declaration order, and the lvfha order really works at this time. In other words, if there is no style conflict, the order of declaration is not important
In other words, to avoid style conflicts in other ways, there is no need to follow the lvfha order, such as combining pseudo-classes to expand the state:
/* 不要求顺序 */
:link
:visited
:link:hover
:visited:hover
/* 要求顺序 位于上2行之后 */
:link:active
:visited:active
/* 或者替掉上2行 不要求顺序 */
:link:hover:active
:visited:hover:active
After unfolding, there is no overlapping state, so that every rule becomes strictly mutually exclusive, and naturally there is no conflict
PS Note: Because IE6- can't handle the combined pseudo-class correctly, only the last one is recognized, so lvha is more widely used (in fact, the semantics of the combined pseudo-class is clearer and there is no "hidden strange rule")
In addition, you can cascade rules to achieve special effects, such as:
// 用lhva实现只有未访问的链接才有hover效果
a:link {}
a:hover {}
a:visited {}
a:active {}
Very interesting tips, equivalent to:
a:link:hover {}
This reflects the clear semantic advantage of combined pseudo-classes
Contact ayqy