:required 选择器选择那些需要的元素。
:required 选择器选择具有 required 属性集的表单元素。
在提交表单之前，可以指示哪些字段应该具有有效数据，从而允许用户避免不必要的等待。
它仅适用于表单元素 <input>、<select> 和 <textarea>。
:required 选择器可以与伪元素（例如 ::after）和其他选择器（例如:hover)。
可以使用 :optional 伪类以及 :valid 和 :invalid 自定义非必需元素，它们在满足表单字段的数据要求时激活。
语法
:required {
css declarations;
}
:required 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:required selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="name" required>Name *
</label>
<label>
<input type="email" required>Email *
</label>
<label>
<input type="phone">Phone (optional)
</label>
<label>
<input type="url">Address (optional)
</label>
</form>
</div>
</body>
</html>
在给定的示例中， :optional 和 :required 伪类选择器都被使用。
日期：2020-06-02 22:14:45 来源：oir作者：oir