伪类选择器
2019-12-16 本文已影响0人
fb941c99409d
获取不存在与DOM树中的信息。比如<a>标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS伪类选择器来获取;
链接伪类
/* IE6中,不支持对超链接以外的元素设置:hover和:active
*重点 a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。
hover和active也可以为其他元素设置
*/
a:link 表示普通的链接(没访问过的链接)
a:visited 表示访问过的链接 由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色
a:hover 表示鼠标移入的状态
a:active 表示的是超链接被点击未松开的状态
:target 它的作用是匹配文档(页面)的URI中某个片段标志符的目标元素 (url地址中的#号,可以理解为当前点击的锚点元素)
表单相关伪类 IE9以上兼容
:focus 获取焦点以后
:enabled 可编辑状态
:disabled 禁用状态
:checked 选中状态
结构关系伪类
nth-child 'ul li:nth-child(1) 选中任意位置的li元素 从1开始计算 [even偶数 odd奇数 n+1 n从0开始累计]'
nth-last-child 'ul li:nth-last-child(3) 找到倒数第三个li元素'
first-child 'div:first-child 匹配div结构上的第一个子元素 (div p:first-child 匹配div第一个子元素并且得是p)'
last-child 'div:last-child 匹配div结构上的最后一个子元素 (div p:last-child 匹配div最后一个子元素并且得是p)'
only-child '父节点中必须只有一个子节点'
only-of-type '#wrap p:only-of-type 不管父元素内部有多少其他元素 p元素必须只有一个'
nth-of-type '#wrap p:nth-of-type(2) 不管wrap内部结构怎样 直接找第二个p标签'
first-of-type `不管父元素内部结构怎样 匹配相同类型子元素中的第一个`
last-of-type `不管父元素内部结构怎样 匹配相同类型子元素中的最后一个`
nth-last-of-type '#wrap p:nth-last-of-type(2) 不管wrap内部结构怎样 直接找倒数第二个p标签'
:empty 匹配没有子元素(包括文本节点)的
-----
of系列的坑: 以元素为中心解析, 不要用 类 和id 等开头 ,会出错, 正确方法 '标签:xx-of-type'
其他伪类
p:not(.nav) 否定选择器 为所有没有.nav类的p设置样式 取值也可以是 类,id等...