html之伪类的学习

html之伪类的学习

目标伪类的使用

html之伪类的学习
就是**:target{}** ,上面图片的效果是在点击a标签的时候,在弹向下面h2内容的时候,还会把h2内容变成红色,就是对活跃的对象进行修改。

状态伪类的使用

如图,就是按钮的disable属性,使用给这个属性加上伪类就可以修改它的状态
html之伪类的学习

动态伪类的使用

html之伪类的学习
html之伪类的学习
html之伪类的学习
html之伪类的学习

:nth-child() 和 :nth-of-type()伪类的使用

html之伪类的学习
html之伪类的学习
html之伪类的学习
也可以使用 :nth-of-last-type()

:only-child 伪类的使用

如下面的 body:only-child 代表body里面,选择那些 自己是父标签中唯一的子元素的元素,如第一个div中的span标签,它自己就是父标签的唯一一个儿子,下面div的span标签也是这样的
html之伪类的学习

:root 就代表选择html标签
:empty 代表标签内容为空
:not(否定伪类)的使用

html之伪类的学习
html之伪类的学习

伪元素的使用

html之伪类的学习
html之伪类的学习