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

This article mainly shows you how to use the selector in Css:checked. The content is simple and easy to understand. It is clearly organized. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn how to use the selector in Css:checked.

The:checked pseudo-class is a great state selector introduced by CSS3 to indicate the selected state of a selection box (radio box, check box, or options).

Some readers may be a little confused, but we can also put initial state in the document (such as selected or checked defined in Section 17.2.1 of HTML4). So strictly speaking, the:checked pseudo-class does not exactly act on information outside the document, but it is essentially a dynamic interaction.

We also learn the use of the:checked pseudo-class through an online example, which is a classic pure CSS accordion navigation bar without any js script:

Dynamic selectors similar to:checked and related to UI component status include:enabled and:disabled, which are rarely used and will not be described further here.

The above are all pseudo-classes related to element state (Dynamic pseudo-classes), in addition to this, we often use structural pseudo-classes (Structural pseudo-classes), such as:first-child, etc.

: first child and: last child

These two pseudo-classes are related to HTML element hierarchies. They position target elements according to the order in which HTML elements appear in the code. We can think of element order or hierarchy as a special state.

One

Two

Three

Four

li:first-child{ background: greenyellow;}

li:last-child{ background: lightsalmon;}

As you can see, we didn't add class attributes to the first and last elements. Their location in the document defines the application of CSS rules. In such examples, we can achieve the same goal by adding specific classes to these elements, which helps us understand why the CSS rules described above for selecting elements by element state or order are called "pseudo-classes."

The above is "Css:checked selector how to use" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.