CSS3选择器

CSS3属性选择器:

  1. E[attr]只使用属性名,但没有确定任何属性值
  2. E[type="text"]指定属性名,并指定了该属性的属性值
  3. E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的"~"不能不写
  4. E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的
  5. E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的
  6. E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value
  7. E[attr|="value"]指定了属性名,并且属性值是value或者以"value-"开头的值(比如说zh-cn)

CSS3结构性伪类:

  1. E:nth-child(n) 表示E父元素的第n个子节点,且类型为E
  2. p:nth-child(odd){background:red} /*匹配奇数行*/
  3. p:nth-child(even){background:red} /*匹配偶数行*/
  4. p:nth-child(2n){background:red}
  5. E:nth-last-child(n) 表示E父元素的第n个子节点,从后向前算,且类型为E
  6. E:nth-of-type(n) 表示E父元素的第n个E子节点
  7. E:nth-last-of-type(n)表示E父元素的第n个E子节点,从后向前算
  8. E:empty 表示E元素没有子节点。注意:包含文本节点
  9. E:first-child 表示E父元素中的第一个子节点,且类型为E
  10. E:last-child 表示E父元素中的最后一个子节点,且类型为E
  11. E:first-of-type 表示E父元素中的第一个E子节点
  12. E:last-of-type 表示E父元素中的最后一个E子节点
  13. E:only-child表示E父元素中只有一个子节点。注意:不包含文本节点
  14. E:only-of-type 表示E父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:不包含文本节点

CSS3伪类:

  1. E:target 表示当前的URL片段的元素类型(id被a的href链接并被点击),这个元素必须是E(详见:伪类target效果)
  2. E:disabled 表示不可点击(获取焦点)表单控件
  3. E:enabled 表示可点击(获取焦点)的表单控件
  4. E:checked 表示已选中的checkbox或radio
  5. E:first-line 表示E元素中的第一行
  6. E:first-letter 表示E元素中的第一个字符
  7. E::selection表示E元素在用户选中文字时(moz)
  8. E::before 生成内容在E元素前
  9. E::after 生成内容在E元素后
  10. E:not(s) 表示E选中的元素中的s不被匹配(s是标签名)
  11. E~F 表示E元素毗邻的所有F元素(之后的所有同级元素,类似于nextAll()),下一个F元素则要用"+"
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页