Posts in current category
May 03, 2021 22:00 CSS
CSS pseudo-classes are special effects for adding selectors.
Because the state change is non-static, when an element reaches a specific state, it may get a pseudo-class style; A
s you can see, its functionality is somewhat similar to class, but it is based on abstractions outside the document, so it's called a pseudo-class.
The syntax of a pseudo-class:
CSS classes can also use pseudo-classes:
In CSS-supported browsers, the different states of the links can be displayed in different ways
Note: In the CSS definition, a:hover must be placed after a:link and a:visited before it is valid.
Note: In the CSS definition, a:active must be placed after a:hover before it is valid.
Note: The name of the pseudo-class is not case sensitive.
Pseudo-classes can be used with CSS classes:
<a class="red" href="css-syntax.html">CSS Syntax</a>
If the link to the example above has been accessed, it will appear in red.
You can use the :first-child pseudo-class to select the first child element of an element
Note: Previous versions of IE8 must state that the DOCTYPE, so that :first-child can take effect.
In the following example, the selector matches the element as the first child of any element:
In the following example, select the first of all the elements that match the one:
In the following example, the selector matches all of the elements that are the first child of the element:
:lang pseudo-classes give you the ability to define special rules for different languages
Note: I E8 must state that the D OCTYPE; Lang pseudo-class.
In the following example, the lang class defines the type of quotation marks for a q element with a property value of no:
Add different styles to hyperlinks
This example shows how to add additional styles to hyperlinks.
This example shows how to use the :focus pseudo-class.
|:link||a:link||Select all unresoled links|
|:visited||a:visited||Select all the links you've visited|
|:active||a:active||Select the active link|
|:hover||a:hover||The status of the mouse on the link|
|:focus||input:focus||The element is selected to have focus after input|
|:first-letter||p:first-letter||Select the first letter of each element|
|:first-line||p:first-line||Select the first line of each element|
|:first-child||p:first-child||The selector matches the element of the first child element that belongs to any element|
|:before||p:before||Insert content before each element|
|:after||p:after||Insert the content after each element|
|:lang( language )||p:lang(it)||Select a start value for the lang property of the element|
CSS Pick-Up Series: Talk about pseudo-elements and pseudo-classes in CSS