036-UI伪类选择器（I） | css3
本帖最后由 liuzhengyuan 于 2020-3-10 09:02 编辑《零基础入门学习web开发》第37讲 初学CSS的噩梦III | 学习笔记
伪类选择器：
UI伪类选择器：
1, :enable / disable
就是，设置必填/选填元素样式
stlye:
:enabled {
outline: 1px solid green;
}
:disabled {
outline: 1px solid red;
}
main:
<label>enable: <input type="text" name="enable"></label> <br><br>
<label>disable: <input type="text" name="disable" disabled></label><br><br>
<button>enable</button>
<button disabled>disable</button>
就是这样：
2,:checked
被选中元素样式，（ + ... 就是设置 cheked 之后的元素）
stlye:
:checked + span {
background-color: cornflowerblue;
color: blue;
}
main:
<br><br><br>
<input type="radio" name="numbers" value="first"><span>1</span><br>
<input type="radio" name="numbers" value="second"><span>2</span><br><br>
<input type="checkbox" name="fruits" value="watermelon"><span>西瓜</span><br>
<input type="checkbox" name="fruits" value="stawberry"><span>草莓</span><br>
<input type="checkbox" name="fruits" value="apple"><span>苹果</span><br>
效果：
3,:optional / :required
设置可选/不可选元素的样式
stlye:
:optional {
background-color: cornflowerblue;
}
:required {
background-color: lightcoral;
}
main:
<form>
<label>optianal: <input type="text" name="optional"></label><br><br>
<label>required: <input type="text" name="required" required></label><br><br>
<button type="submit">submit</button><br><br>
</form>
效果：
4,:default
默认元素的样式，比如按钮之类的（实在想不出还有什么别的~）
stlye:
:default {
background-color: black;
color: white;
}
main:
<form>
<label>optianal: <input type="text" name="optional"></label><br><br>
<label>required: <input type="text" name="required" required></label><br><br>
<button type="submit">submit</button><br><br>
</form>
效果：
页:
[1]