Analysis of css pseudo-class usage examples
This article introduces the relevant knowledge of "css pseudo-class use case analysis". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!
A pseudo-class is added to the selector, preceded by a colon, followed by an attribute with a parenthesized value. The syntax for pseudo-classes is as follows
selector:pseudo-class{property:value;}
elementary pseudo-class
There are many different pseudo-classes, and the following code example demonstrates some of the most basic ones. These are classified as dynamic pseudo-classes that change due to user actions. In the code example, the: link pseudo-class is used to set the color of the link to blue. Once the user accesses the link, the: visited pseudo-class is used to change the color of the link to maroon. It was also demonstrated that when a user hovers over an image, the hover changes a purple circle with white text to a pink square with yellow text. Focus pseudo-class changes the date entry field to gray when the user clicks on or on "Focus."
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div{
background-color:purple;
color:white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
div:hover{
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
}
input:focus{
background-color:lightgray;
}
Clickonthislink!
Hoveroverthis
Entertodaysdateinthefieldbelow
Date:
Some more pseudo-classes
Some of the more common pseudo-classes are listed below. A complete list of all pseudo-classes can be found here.
: first-child-This class allows you to add a specific style to an element that is the first child of its parent element.
: root-This pseudo-class is used to match the root element of the document.
: lang-Different languages have different rules and conventions. Sometimes you need to create pages in multiple languages.: The lang pseudo-class is useful in this case. It mainly looks at lang=""HTML attributes and elements and matches elements accordingly.
: disabled-This allows you to indicate disabled input elements such as text fields and buttons.
: fullscreen-This pseudo-class uses elements in fullscreen mode.
pseudo-elements
Pseudo-elements have functionality similar to pseudo-classes in that they can be styled by CSS and added by user agents. But they differ from pseudo-classes because they allow you to use elements that don't exist in the DOM. Syntax identifiers for pseudo-elements are usually double colons, rather than single colons like pseudo-classes. Common pseudo-elements are::before,::after, and::first-line. It is important to note that some encoders use a single colon: for pseudo-elements, this is the convention in CSS2. Keep this in mind to avoid confusion between pseudo-classes and pseudo-elements.
"css pseudo-class use of instance analysis" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!
