伪类选择器

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等...
上一篇 下一篇

猜你喜欢

热点阅读