:default 伪类匹配一组关联元素中的默认元素,例如一组默认选中的按钮中的单选按钮,即使用户选择了不同的值。
该伪类只能用于 <button>、<input>(当 type="checkbox" 或者 type="radio")和 <option> 元素。
语法
:default { css declarations; }
用于 <input> 标签的 :default 选择器示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> input:default { box-shadow: 0 0 2px 2px #1c87c9; } .example { margin: 20px auto; font-size: 20px; } </style> </head> <body> <h2>:default selector example</h2> <div class="example"> <p>Do you like coffee?</p> <input type="radio" name="radios" id="ex1" checked> <label for="ex1">Yes</label> <br/> <input type="radio" name="radios" id="ex2"> <label for="ex2">No</label> </div> </body> </html>
用于带有 type 属性的 <input> 标签的 :default 选择器示例:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .example { margin: 40px auto; max-width: 700px; } input[type=submit] { padding: .6em 1em; font-size: 1em; width: 100px; margin-bottom: 1em; } input[type=submit]:default { border: 4px dotted #8ebf42; } </style> </head> <body> <h2>:default selector example</h2> <div class="example"> <form action="#"> <input type="submit" value="Yes"> <input type="submit" value="No"> </form> </div> </body> </html>
日期:2020-06-02 22:14:28 来源:oir作者:oir