Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.