*HTML基础笔记之伪类选择器*
伪类选择器
同一个标签根据其不同状态会显示不同的样式的就是伪类选择器。
动态伪类选择器
-
链接伪类选择器
:link{} 初始状态
:visited{} 访问过后的状态 -
用户行为选择器
:hover{} 鼠标移入的状态
:active{} 鼠标按下的状态
:focus{} 选中获取了焦点(光标在哪里跳动)的元素,可以和 表单结合使用
目标伪类选择器
:target{} 当a被点击时,对应选择器发生改变
此时,分别点击第一,二,三部分得
结构伪类选择器
:first-child{} 选中父元素的第一个子元素
:last-child{} 选中父元素的最后一个子元素
:nth-child(n){} n是从0开始的,选中父元素的第n个子元素
2n 偶数列 even
2n-1 奇数列 odd
:only-child{} 选中只有本身一个同级的元素
:nth-last-child(n){} 选中父元素的倒数第n个子元素
:nth-of-type(n){} 指定类型的第n个元素
first-of-type{} 指定类型的第一个元素
last-of-type{} 指定类型的最后一个元素
:nth-last-of-type(n){} 同类型中的倒数第n个同级兄弟元素
:only-of-type{} 指定元素中只有一个同类型的元素
UI元素状态伪类选择器
:enabled{} 选中可以输入的元素
:disabled{} 选中不可输入的元素
:checked{} 选中被选中的元素
:selection{} 被用户选中的内容处于高亮的状态
其他
:root{} 选中html(根元素)
:empty 选中空元素
css3中伪类选择器和伪对象选择器的区别
- 伪类(:)一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性; 伪元素(::)表示DOM外部的某种文档结构。
- 伪类 按现在的规范应当书写成 :weilei伪元素 按现在的规范 应当书写成 ::weiyuansu但是 以前规范不明确的时候 伪元素 和 伪类 都是写成 :weiyuansu :weilei为了兼容过去的写法所以 你的伪元素 写成一个引号的形式 也是可以被解析的
- 伪元素主要有:E:first-letter/E::first-letter E:first-line/E::first-line E:before/E::before E:after/E::after E::placeholder E::selection
- 伪类主要有:E:link E:visited E:hover E:active E:focus E:lang(fr) E:not(s) E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:empty E:checked E:enabled E:disabled E:target @page:first @page:left @page:right
- 单冒号 双冒号 主要是为了区别 伪元素还是伪类
小结
以上并不完整,欢迎大家批评指正。