Learn the pseudo class and pseudo elements of CSS

Css

In CSS, pattern matching rules determine which element of the document tree The style rule applies to. These patterns are called selectors (selector). A CSS rule is a selector {property: Value; property: Value;} (Selector {property:value;property1:value2;} , that is, the selector determines which element the declaration (declaration) in {} matches.

The selectors in CSS2.1 are:

Pattern in section

	meaning	described
*	matches any element.	Universal Selector
E	Matches any e-element (i.e., an element of type E).	Type Selectors
E F	Matches any F-element is a descendant of the E element.	Descendant selectors
E > F	Matches any F-element that is the child of the An element E.	Child selectors
E:first-child	Matches element e When E is the "the" "	The:first-child Pseudo-class
E:link e:visited	Matches element e If E is the source anchor of a hyperlink of which the target are not yet visited (: link) or already visit Ed (: visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang (c)	Matches element of type E if it is in (human) language C (the document language specifies how language is determined).	The:lang () Pseudo-class
E + F	Matches any F element immediately preceded by a sibling element E.	adjacent selectors
E[foo]	Matches any E-element with the "foo" attribute set (whatever the value).	Attribute Selectors
e[foo= "Warning"]	Matches any E-element whose "Foo" attribute value is exactly equal to "warning".	Attribute Selectors
e[foo~= "Warning"]	Matches any E-element whose "Foo" attribute value is a list of space-separated values, one of which are exactly equal to "W Arning ".	Attribute Selectors
E[lang|= "en"]	Matches any E element whose "lang" attributes has a hyphen-separated list of values beginning (from the left) with "en".	Attribute Selectors
Div.warning	Language Specific. (in HTML, the same as div[class~= "warning"].)	Class Selectors
E#myid	Matches any E-element with ID equal to "myID".	ID Selectors

class : When expressing class attributes in HTML, one can use the dot (.) number as an alternative to the ~= number, so div.value is equivalent to Div[class~=value]. At this point, the. Value can only be applied strictly to the class attribute in HTML, so this class selector is called a class selector.

In CSS2.1, styles are usually attached to the position of an element in the document tree, and this simple model is sufficient for many situations, but some common layout states cannot be applied to the structure of the document tree. For example, in HTML, no element can refer to the first line of a paragraph, so there is no simple CSS selector to apply it.

Therefore, CSS introduces pseudo class (Pseudo-class) and pseudo elements (pseudo-element) to allow the formatting of information outside the document tree.

pseudo -class: Pseudo-classes classify elements based on features (characteristics) rather than their names, attributes, or content; In principle, features cannot be inferred from the document tree. Pseudo classes can be dynamic on the sense that an element can acquire or lose a pseudo class when the user interacts with the document. The exception is ": First-child" can be inferred from the document tree, ": lang" in some cases also inferred from the document tree.

Pseudo class have:: First-child,: Link:,vistited,:hover:,active:focus,:lang

Pseudo element: Pseudo element is an abstraction that creates a document tree that can be specified in a document language. For example, a document language cannot provide a mechanism to access the first word or the first line of element content. Pseudo elements allow designers to reference them, otherwise this is difficult to do. Pseudo elements also provide a style designer to assign styles to content that does not exist in the source document (for example:: Before and: After can access the resulting content).

Pseudo elements are:: First-line,:first-letter,:before,:after (in the CSS2.0 Chinese manual of Su shen Rain): First-line,:first-letter classified as pseudo class should be the error of understanding)

Pseudo classes and pseudo elements are not present in the source file and the document tree.

Summary above can know:

1. Class selectors can look at the attribute selector E[class~=classname] A shortcut in HTML application that logically and functionally understands the meaning of the traditional class, which is referenced by the predefined attribute class of the HTML element, so it is called a class selector.
2. Pseudo classes can assign styles independently of the elements of the document, and can be assigned to any element, logically and functionally similar, but they are predefined, do not exist in the document tree, and are expressed in different ways, so they are called pseudo classes.
3. Pseudo elements control the same content as an element, but pseudo elements do not exist in the document tree and are not real elements, so they are called pseudo elements.