上一篇
伪类选择器汇总
- 行业动态
- 2024-03-28
- 1
伪类选择器汇总
在CSS中,伪类选择器是用来选取DOM树之外的元素,或者是不能被常规CSS选择器选中的元素,这些元素通常是由浏览器的默认行为创建的,例如链接的:hover状态,或者是表单的:focus状态。
以下是一些常用的伪类选择器:
1. 动态伪类
动态伪类用于在用户与页面交互时改变某些元素的样式。
伪类 | 描述 |
:hover |
当鼠标指针悬停在元素上时 |
:active |
当元素被用户激活(被点击)时 |
:focus |
当元素获取焦点(输入字段被点击)时 |
:visited |
当链接已被访问时 |
:link |
当链接未被访问时 |
2. 结构性伪类
结构性伪类主要用于样式化文档结构的一部分。
伪类 | 描述 |
:firstchild |
选取其父元素的首个子元素 |
:lastchild |
选取其父元素的最后一个子元素 |
:nthchild(n) |
选取其父元素的第n个子元素 |
:firstoftype |
选取其父元素的首个特定类型的子元素 |
:lastoftype |
选取其父元素的最后一个特定类型的子元素 |
:nthoftype(n) |
选取其父元素的第n个特定类型的子元素 |
:onlychild |
选取唯一子元素 |
:onlyoftype |
选取唯一的特定类型的子元素 |
3. 表单相关的伪类
表单相关的伪类主要用于处理表单元素的各种状态。
伪类 | 描述 |
:enabled |
选取可用的表单元素 |
:disabled |
选取不可用的表单元素 |
:checked |
选取被选中的复选框或单选按钮 |
:default |
选取默认的表单元素 |
:required |
选取必填的表单元素 |
:optional |
选取非必填的表单元素 |
:valid |
选取有效输入的表单元素 |
:invalid |
选取无效输入的表单元素 |
:inrange |
选取在指定范围内的数字输入的表单元素 |
:outofrange |
选取超出指定范围的数字输入的表单元素 |
:readwrite |
选取可读写的表单元素 |
:readonly |
选取只读的表单元素 |
:selection |
选取用户当前选择的文本 |
:placeholdershown |
选取显示占位符的表单元素 |
以上就是CSS中常见的一些伪类选择器的归纳。
本站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本站,有问题联系侵删!
本文链接:http://www.xixizhuji.com/fuzhu/285945.html