Home > Article > Web Front-end > Detailed explanation of the use of CSS3's default pseudo-class selector
This time I will bring you the default pseudo-class selector of CSS3Detailed explanation of its use, using the defaultpseudo-class of CSS3What are the precautions for the selector , the following is a practical case, let’s take a look.
1. Introduction to CSS3 :default pseudo-class selector
CSS3 :default pseudo-class selector can only be used on form elements, indicating Default state of form elements.
For example, a drop-down box may have multiple options. By default, we will make an
Assume the CSS is as follows:
option:default {
color: red;
}
In the Chrome browser, when we select other options, you can see that option 4 is red, and the effect is as follows:
The effect is similar in Firefox browser:
IE browser is not supported.
Therefore, the mobile terminal can be used with confidence, and the desktop terminal can be used without worrying about IE projects.
2. CSS3:default pseudo-class selector function
CSS3:default pseudo-class selector function is designed to allow users to select When you have a set of data, you still know what the default option is. Otherwise, if there are too many other options, you will not know which one is provided by default. This is an experience enhancement strategy. The effect is not very strong, but it is useful at critical moments.
3. Research on some features of CSS3:default pseudo-class selector
1. Research 1: Will JS rapid modification have any impact?
The test code is as follows:
:default {
transform: sclae(1.5);
}
That is, HTML sets the second radio button to be enlarged 1.5 times, and JS immediately sets the third radio button to be selected. It turns out that even if it is very fast , even if there is almost no delay in the JS modification, the rendering of the :default pseudo-class selector will still not be affected.
Therefore, the answer to this question is no impact.
2. Study 2:
For example:
option:default {
color: red;
}
The first
Therefore, the answer to this question is no response.
4. Practical application of CSS3 :default pseudo-class selector
Although the :default selector is used to mark the default state, avoid Choose obfuscation. But in fact, in my opinion, the more practical value should be the "recommended mark".
Modern web applications are becoming more and more intelligent. Sometimes some operations will intelligently push some choices to the user, in which the recommended settings are set to the checked state by default. In the past, our approach was to additionally output the text "(recommended)" , now with the :default selector, our implementation can become more concise and easier to maintain.
You can click here: :default selector and automatically add recommended words demo
The effect is as follows:
Clicking on other options, the word "recommended" remains solid. In the future, if you want to change the recommended options, you can directly modify the checked attribute of the input, making maintenance easier.
The relevant CSS and HTML codes are as follows:
input:default + label::after {
content: '（推荐）';
}
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
The above is the detailed content of Detailed explanation of the use of CSS3's default pseudo-class selector. For more information, please follow other related articles on the PHP Chinese website!