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

This article focuses on "CSS3: how to use the default pseudo-class selector", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "CSS3: how to use the default pseudo-class selector"!

A brief introduction to CSS3: default pseudo-class selector

CSS3: the default pseudo-class selector can only act on form elements that represent the default state of the form element.

For example, a drop-down box may have multiple options, and we will leave someone in the selected state by default, which can be regarded as a form element in the default state (such as "option 4" of the following code), which in theory can be applied: default pseudo-class selector.

Option 1 option 2 option 3 option 4 option 5 option 6

Suppose the CSS is as follows:

Option:default {color: red;}

In the Chrome browser, when we select other options, we can see that option 4 is red, as shown below:

The effect in Firefox browser is similar:

IE browsers do not support it.

Therefore, the mobile side can be safely used, and the desktop side can also be used without worrying about IE projects.

CSS3: the role of default pseudo-class selector

CSS3: default pseudo-class selector is designed to let users still know what the default option is when selecting a set of data, otherwise if there are many other options, they will not know which one is provided by default, which can be regarded as an experience enhancement strategy. The effect is not very strong, but it is very useful at the critical moment.

Third, some characteristics of CSS3: default pseudo-class selector 1. Will there be any impact on studying the rapid modification of 1:JS?

The test code is as follows:

: default {transform: sclae (1.5);} document.querySelectorAll ('[type= "radio"]') [2] .requests = true

That is, the HTML setting is 1.5x magnification of the second radio box, and JS immediately sets the third radio box selected, and it is found that even if it is very fast, even if there is almost no delay in JS modification, the rendering of the: default pseudo-class selector will not be affected.

Therefore, the answer to this question is no impact.

two。 Study 2: if the selected property is not set, the browser will render the first one by default, and the first response: default pseudo-class selector?

For example:

Option:default {color: red;} Please choose Beijing, Shanghai, Shenzhen, Guangzhou, Xiamen

As a result, the first one is not red, as shown in the following figure, so the: default selector must be true for selected to work. Similarly, for a single check box, the checked value should also be true.

Therefore, the answer to this question is no response.

4. Practical application of CSS3: default pseudo-class selector

Although it is said that the default selector is used to mark the default state to avoid selection confusion. But in fact, in my opinion, what is more practical should be the "recommendation mark".

Modern web applications are becoming more and more intelligent, and sometimes some operations will intelligently give users some choices, in which the recommended setting is set to checked by default. In the past, we used to output the text "(recommended)", but now we have: default selector, our implementation can become more concise and easier to maintain.

You can click here:: default selector and automatically add the word demo.

The effect is as follows:

Click on other options, and the word "recommend" remains solid. In the future, if you want to change the recommended options, you can directly modify the checked property of input, which makes it easier to maintain.

The relevant CSS and HTML codes are as follows:

Input:default + label::after {content:'(recommended)';}

Alipay

WeChat

Bank Card

At this point, I believe you have a deeper understanding of "CSS3: how to use the default pseudo-class selector". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.