Distinguish between pseudo-classes and pseudo-elements

One: Pseudo class:
1: Definition : The css pseudo-class is used to add special effects to some selectors.
Pseudo-classes are actually similar to ordinary CSS classes, which can add styles to existing elements, but they can only add styles to elements in the document tree when they are in a state that cannot be described by dom, so they are called pseudo-classes. (What is the state that cannot be described by the document tree? When an element changes to a different state under different actions of the user, the change of this behavior cannot be described by the DOM, so pseudo-classes are generated to add special features to some selectors Effect).
2: What is a Document Tree (DOM)? :
DOM is actually a document model described in an object-oriented way. DOM defines the objects required to represent the modified document, the behavior and properties of these objects, and the relationship between these objects, so DOM humanities are the data on the page. and a tree representation of the structure.
3: What are the pseudo-class selectors:
1) :link adds styles to unvisited links (links, it seems, are only used for <a>)
2) :visited adds styles to links that have been visited (links, it seems, are still only used for <a>)
3) :hover adds styles to the element when the mouse hovers over it (without specifying that it must be a link, so this tag is heavily used to define the style of any block/line element when the mouse is over it)
4):active adds a style to the activated element (the style when the mouse is clicked, pay attention to the change of the style when clicked, this is not a pseudo-class selector that can only be used by hyperlinks)
5) :focus adds a style to the element with the keyboard input focus (for example, the background color of the input input box changes when the mouse is clicked, pay attention to the keyboard input focus. Note that some browsers do not support this function style)
6) :first-child is used to match the first element in the parent element. For example, E:first-child, looking for the E element, the E element must be the first element of his parent element (extension [:nth-child(n)] is used to match the nth child element E of the parent element, this The parent element must be the parent of element E.).
7): lang adds styles to elements with the specified lang attribute (set the lang attribute in the tag, style the element with this exact lang attribute value in the style sheet, even if you have the ability to set the lang attribute value for different languages define special rules)
4: Note:
The pseudo-class selectors ":link" and ":visited"" can only be used for unvisited and visited styles destined for a link.
The pseudo-class selectors ":hover" and ":active" can be used to define the style of any block or line element when clicked while the mouse is over.
5: Important : The order of the above four pseudo-class selectors must be fixed, otherwise there will be no expected changes. Here's a trick to remember: love hate.
Two: pseudo elements:

1: Pseudo-elements are used to create some elements that are not in the document tree, and add styles to them, for example: using pseudo-elements "::before" can add some text in front of an element, and add some styles to these texts , although the user can see the written text, but the text does not exist in the document tree.
2: Several common pseudo-elements :
1): frist-letter is used to add style to the first letter in the text
2) :first-line adds styles to the first line of text
3) :before adds content before the element
4) :after adds content after the element
3: The difference between pseudo elements and pseudo classes:
(1) The biggest difference between pseudo-classes and pseudo-elements is whether an element other than the document tree is created. Pseudo-elements create and style an element outside the document tree (virtual container) that does not contain any DOM elements but can contain content. In other words, the difference between pseudo-classes and pseudo-elements is that pseudo-classes operate on existing elements in the document tree, while pseudo-elements create an element outside the document tree.
(2) Pseudo-classes use single colons, but double colons are specified for pseudo-elements in CSS3, but except for a small number of pseudo-elements that must use double colons, single-quotes are supported like after and before. For compatibility, it is still safer to use a single colon when using some common pseudo-elements.


This article learns and summarizes this blog, thanks to the great gods:
https://kb.cnblogs.com/page/545911/

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325804821&siteId=291194637