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 in the selected state. At this time, this can be regarded as a form in the default state. Elements (such as "Option 4" in the code below), in theory the :default pseudo-class selector can be applied.

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    <option>选项5</option>
    <option>选项6</option>
</select>

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);
}
<input>
<input>
<input>
<script>
document.querySelectorAll(&#39;[type="radio"]&#39;)[2].checked = true;
</script>

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: If the selected attribute is not set, the browser will render the first by default. At this time, the first responds: default pseudo-class selector ?

For example:

option:default {
    color: red;
}
<select>
    <option>请选择</option>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>广州</option>
    <option>厦门</option>
</select>

The first in the result is not red, as shown below. Therefore, for the :default selector to be effective, selected must be true. Similarly, for a single checkbox, the checked value must also be true.

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: '（推荐）';
}
<p><input> <label>支付宝</label></p>
<p><input> <label>微信</label></p>
<p><input> <label>银行卡</label></p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端技术实现文本文字纹理叠加

CSS3混合模式使用详解

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!