:checked
:enabled
:disabled
- :checked
<style>
label {background-color: red; display: block;}
:checked{width: 50px;}
</style>
<body>
<label><input type="checkbox"> 1-1 </label>
<label><input type="checkbox"> 1-2 </label>
<label><input type="radio" name="test"> 2-1 </label>
<label><input type="radio" name="test"> 2-2 </label>
</body>
:checked 适配 radio 和 checkbox 中被选中的元素。
- :enabled
<style>
label {background-color: red; display: block;}
:enabled{width: 50px;}
</style>
<body>
<label><input type="checkbox"> 1-1 </label>
<label><input disabled type="checkbox"> 1-2 </label>
<label><input type="radio" name="test"> 2-1 </label>
<label><input type="radio" name="test"> 2-2 </label>
</body>
匹配所有非 disabled 状态下的表单元素，该选择器与 :disabled 选择器是对立的。
- :disabled
<style>
label {background-color: red; display: block;}
:disabled{width: 50px;}
</style>
<body>
<label><input type="checkbox"> 1-1 </label>
<label><input disabled type="checkbox"> 1-2 </label>
<label><input type="radio" name="test"> 2-1 </label>
<label><input type="radio" name="test"> 2-2 </label>
</body>
匹配所有带 disabled 属性的表单元素，该选择器与 :enabled 选择器是对立的。
网友评论