: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
