美文网首页
伪类选择器

伪类选择器

作者: fb941c99409d | 来源:发表于2019-12-16 00:15 被阅读0次

获取不存在与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等...

相关文章

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • CSS选择器(2)

    伪类选择器 伪类选择器实例

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

  • jQuery之选择器

    基本选择器 层级选择器 简单伪类选择器 与内容相关的伪类选择器 与元素状态相关的伪类选择器 匹配子元素的伪类选择器...

  • C3选择器

    属性选择器 兄弟选择器 伪类选择器 伪类target 伪元素before,after 其他伪元素

  • css3-新增选择器

    本文目录 1.属性选择器 2.伪类选择器(普通伪类、目标伪类、链接伪类) 3.伪元素选择器 1.属性选择器 E[a...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • 精通CSS高级Web标准解决方案读书笔记-02为样式找到应用目标

    常用选择器(类型选择器,后代选择器)p #id .class 伪类链接伪类:link :visited 动态伪类:...

网友评论

      本文标题:伪类选择器

      本文链接:https://www.haomeiwen.com/subject/rlwlnctx.html