官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
:enabled 选择器:https://man.ilovefishc.com/pageCSS3/dotenabled.html
:disabled 选择器:https://man.ilovefishc.com/pageCSS3/dotDisabled.html
:checked 选择器:https://man.ilovefishc.com/pageCSS3/dotChecked.html
:requeired 选择器:https://man.ilovefishc.com/pageCSS3/dotRequired.html
:optional 选择器:https://man.ilovefishc.com/pageCSS3/dotOptional.html
:default 选择器:https://man.ilovefishc.com/pageCSS3/dotDefault.html
:enabled 选择器和 disabled 选择器用于匹配启用和禁用的元素(大多在表单中匹配):
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置禁用与可用的样式 */
:enabled {
outline: 1px solid green;;
}
:disabled {
background-color: #dddddd;
}
</style>
</head>
<body>
<form>
<p>
<label for="enabled">可用:</label>
<input type="text" name="enabled">
</p>
<p>
<label for="disabled">禁用:</label>
<input type="text" name="disabled" disabled>
</p>
<button>可用按钮</button>
<button disabled>不可用按钮</button>
</form>
</body>
</html>
:check 选择器用于修改选中表单元素(单选、多选、下拉)的样式:
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置表单元素的选项被选中时的样式 */
:checked {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<form>
<input type="radio" name="gender" value="male"><span>男人</span><br>
<input type="radio" name="gender" value="femele"><span>女人</span><br>
<hr>
<input type="checkbox" name="fruit" value="egg"><span>鸡蛋</span><br>
<input type="checkbox" name="fruit" value="apple"><span>苹果</span><br>
<input type="checkbox" name="fruit" value="banana"><span>香蕉</span><br>
</form>
</body>
</html>
:required 选择器和 :optional 选择器用于设置必填和可选的样式:
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置必填和可选的样式 */
:required {
outline: 3px solid red;
}
:optional {
outline: 3px solid green;;
}
</style>
</head>
<body>
<form>
<p>
<label for="required">必填:</label>
<input type="text" name="required" required>
</p>
<p>
<label for="potional">可选:</label>
<input type="text" name="potional">
</p>
<button type="submit">提交</button>
</form>
</body>
</html>
:default 选择器用于修改默认元素的样式:
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置默认元素的样式 */
:default {
outline: 3px solid red;
}
</style>
</head>
<body>
<form>
<p>
<label for="required">必填:</label>
<input type="text" name="required" required>
</p>
<p>
<label for="potional">可选:</label>
<input type="text" name="potional">
</p>
<button type="submit">提交</button>
</form>
</body>
</html>