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

How to understand the UI pseudo-class in CSS, I believe that many inexperienced people do not know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

A Pseudo classes is the bolt of a selector that specifies the state of a selector or its associated selector. They take the form of selector:pseudo class {property: value;}, which simply separates selectors from pseudo-classes with a half-width colon (:).

Pseudo classes can be divided into two categories:

UI (User Interface, user interface) pseudo-classes when the HTML element is in a certain state (such as the mouse)

Pointer over the link) to apply the CSS style to the element.

A structured pseudo-class will have a structural relationship in the tag (for example, an element is the first in a set of elements.

One or last), applying the CSS style to the corresponding element.

UI pseudo class

Link pseudo-class

There are a total of four pseudo-classes for links, because links are always in one of the following four states.

Link

Visited

Hover

Active

Tip: because these four pseudo-classes have the same specificity, if you do not use them in the order listed here, the browser may not display the desired results. Easy to remember: LoVe? HA! An uppercase letter is the first letter of each pseudo class.

Tip: a colon (:) indicates a pseudo-class, and two colons (::) indicate a new pseudo-element in CSS3.

Focus pseudo class

The text field in the form gets focus when the user clicks it, and then the user can enter characters in it.

For example: input:focus {border:1px solid blue;}

The above line adds a blue border to the input field when the cursor is in it. This allows the user to know exactly where the entered characters will appear.

Target pseudo class

If the user clicks a link to another element on the page, that element is the target, and you can

Select it with: target pseudo class.

For example: for this link: More Information

The element whose ID is more_info elsewhere on the page is the target.

Suppose the element looks like this: This is the information you are looking for.

So, CSS rule: # more_info:target {background:#eee}

A gray background is added to an element whose ID is more_info when the user clicks the link.

Wikipedia uses a lot of target pseudo-classes in its citations. Wikipedia's citation links are those in the text.

Humble digital links. The citation itself is at the bottom of the long page. If not: target App

Highlight, it's hard to know which link you clicked corresponds to a large list of citations.

Structured pseudo class

Structured pseudo-classes can apply styles based on the structure of the tag, such as what the parent or sibling element of an element is.

First-child and: last-child

Format:

CSS Code copies content to the clipboard

E:first-child

E:last-child

Example:

CSS Code copies content to the clipboard

Ol.results li:first-child {color:blue;}

Nth-child

Format:

CSS Code copies content to the clipboard

E:nth-child (n)

Example:

CSS Code copies content to the clipboard

Li:nth-child (3)

Description: e for element name, n for a numeric value (you can also use odd or even)

After reading the above, have you mastered how to understand the UI pseudo-class in CSS? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.