1.4 特殊状态选择器

• :link 和 :visited
• :hover
• :activr
• :focus
• :enabled 和 :disabled
• :checked
• :in-range 和 :out-of-range
• :read-only 和 :read-write
• :optional 和 :required
• :valid 和 :invalid

:link 和 :visited

• 已访问

a:link {
    color: black;
}
a:visited {
    color: blue;
}

<a href="index.html">点击试试</a>

:hover

• 鼠标悬停

p:hover {
    font-size: 24px;
}

<p>hover</p>

:activr

• 处于活动状态

button:active {
    background-color: yellow;
}

<button>active</button>

:focus

• 焦点

input:focus {
    border: 10px solid red;
}

<input>

:enabled 和 :disabled

• 可用(不可用)

input:enabled {
    border: 1px solid orange;
}

input:disabled {
    background-color: lightcyan;
}

<input value="可用">
<input disabled value="不可用">

:checked

• 选中

input:checked {
    width: 40px;
    height: 40px;
    background-color: orange;
}

<div style="background-color: antiquewhite">
    <input type="checkbox">男
</div>

:in-range 和 :out-of-range

• 是否在范围内

input:out-of-range {
    border:2px solid red;
}

input:in-range {
    border:2px solid yellow;
}

<input type="number" min="4" max="10">

:read-only 和 :read-write

• 读写属性

input:read-only {
    background-color: lightgray;
}

input:read-write {
    background-color: white;
}

<input readonly value="read only">
<input value="read write">

:optional 和 :required

• 可选(必填)

input:optional {
    border: 2px solid orange;
}

input:required {
    border: 2px dashed red;
}

<input required value="required">
<input value="optional">

:valid 和 :invalid

• 有效(无效)

input:valid {
    background-color: greenyellow;
}

input:invalid {
    background-color: red;
}

<input type="email" required>