036-UI伪类选择器（I） | css3

liuzhengyuan

《零基础入门学习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>

效果：