伪类选择器是CSS五种选择器当中应用最灵活的一种,其包含六个分类。
1、动态伪类选择器不同的状态,使用不同的样式。
E: link
E: visited
E: active
E: hover
E: focus
2、目标伪类选择器用来匹配页面的URI中某个标识符的目标元素。
E: target
选择匹配E的所有元素,且匹配元素被相关URL指向。
3、语言伪类选择器用来匹配使用指定语言的元素。
E: lang(language)
4、元素状态伪类选择器当元素处于某种状态下时,才起作用,在默认状态下不起作用。
E: checked
eg: input[type="checkbox"]:checked{}
E: enabled
eg: input[type="text"]:checked{}
E: disabled
eg: input[type="text"]:disabled{}
5、结构伪类选择器这个就比较多了,平时用的也比较频繁。
: nth-child
: nth-last-child
: nth-of-type
: nth-last-of-type
: first-child
: last-child
: only-child
: first-of-type
: last-of-type
: only-of-type
: root 匹配元素所有在文档的根元素
: empty 选择没有子元素的元素,且不包含节点
6、否定伪类选择器E: not(F) 匹配所有除F外的E元素
:hover选择器用于选择鼠标指针浮动在上面的元素。当鼠标悬停在元素上时,可使用此选择器设置元素的样式;它可用于每个元素。
语法:
与hover相关的伪类:
● :hover 选择器可用于所有元素,不仅是链接。
● :link 选择器设置了未访问过的页面链接样式,
● :visited 选择器设置访问过的页面链接的样式
● :active选择器设置当你点击链接时的样式
说明: 为了产生预期的效果,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
示例1: 在悬停在元素上时更改背景颜色。
效果图:
示例2:在文本上悬停时显示隐藏的块
效果图:
更多HTML的相关知识,可访问: web前端自学 !!