CSS伪类的实例(1)

content: attr(href);

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dn8RBuoG-1651287568110)(https://pic.faremax.info/20161024221404375.png)]

:focus

当元素获得焦点时的样式

input[type=“text”]:focus{

border: 1px purple solid;

box-shadow: 0 0 15px black;

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZC6Y85Pb-1651287568112)(https://pic.faremax.info/20161021094742674.png)]

:disabled :enabled (CSS3)

被禁用元素的样式

input:disabled{

background-color: red;

}

input:enabled{

background-color: yellow;

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WgYbfEsH-1651287568113)(https://pic.faremax.info/20170108223450178.png)]

:checked :read-only :read-write :indeterminate :invalid :valid (CSS3)

| 伪类 | 描述 |

| — | — |

| :checked | input中选中的radio、checkbox和select |

| :read-only | 有readonly属性的input、select和textarea元素(firefox不支持) |

| :read-write | 没有readonly属性的input、select和textarea可写元素(firefox不支持) |

| :indeterminate | 没有任一项被选中的radio组(firefox不支持) |

| :invalid | input表单验证不通过的元素 |

| :valid | input表单验证通过的元素 |

---

---

input[type=“checkbox”]:checked{

outline: 2px solid red;

}

input:read-only{

background-color: yellow;

}

input:read-write{

background-color: lightgreen;

}

input:indeterminate{

outline: 1px solid blue;

}

input[type=“email”]:invalid{

background-color: red;

color: #fff;

}

input[type=“email”]:valid{

background-color: #lightgreen;

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5kGGjVQW-1651287568115)(https://pic.faremax.info/20170108230016821