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 multiple>
????<option>選項1</option>
????<option>選項2</option>
????<option>選項3</option>
????<option selected>選項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 type="radio" name="city" value="0">
<input type="radio" name="city" value="1" checked>
<input type="radio" name="city" value="2">
<script>
document.querySelectorAll('[type="radio"]')[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 name="city">
????<option value="-1">請選擇</option>
????<option value="1">北京</option>
????<option value="2">上海</option>
????<option value="3">深圳</option>
????<option value="4">廣州</option>
????<option value="5">廈門</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 type="radio" name="pay" id="pay0">?<label for="pay0">支付寶</label></p>
<p><input type="radio" name="pay" id="pay1" checked>?<label for="pay1">微信</label></p>
<p><input type="radio" name="pay" id="pay2">?<label for="pay2">銀行卡</label></p>

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

前端技術(shù)實現(xiàn)文本文字紋理疊加

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!