CSS3 选择器全面整理及介绍

CSS 3中的属性选择器

  1. [att=val]:如果元素的att属性的属性值等于val的话,则该元素使用这个样式
  2. [att*=val]:如果元素的att属性的属性值包含val的话,则该元素使用这个样式
  3. [att^=val]:如果元素的att属性的属性值以val开头的话,则该属性使用这个样式
  4. [att$=val]:如果元素的att属性的属性值以val结尾的话,则该属性使用这个样式

注:当val中含有特殊字符时需要做字符转义。例如:div[id$=/]

结构性伪类选择器

  1. E:first-line:用于为某个元素中的第一行文字使用样式。
  2. E:first-letter:用户为某个元素中的文字的首字母(英文)或第一个字(中文)使用样式。
  3. E:before:用于在某个元素之前插入一些内容,使用方法:
    E:before {
        content: "words";
    }
  4. E:after:用于在某个元素之后插入一些内容,使用方法:
    E:after {
        content: "words";
    }
  5. :root:指位于文档树中最顶层结构的元素,在HTML页面中就是指“<html>”。
  6. :not:可以排除某个子结构元素,让它不使用这个样式,使用方法:
    body :not(h1) {
        background-color: yellow;
    }
  7. :empty:指定当元素内容为空白时使用的样式。
  8. target:使用target选择器来对页面中某个target元素(锚点:该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
  9. E:first-child:对第一个元素使用的样式。
  10. E:last-child:对最后一个元素使用的样式。
  11. E:nth-child:对指定序号的元素使用的样式。(注:此伪类在计算子元素的序号时是连同父元素中所有子元素一起计算的,如果需要针对特定类型元素计算则需要使用nth-of-type/nth-last-of-type,见第13伪类)
    E:nth-child(an+b):a、b为自然数,对符合该公式的元素使用样式
    E:nth-child(3):对第三个元素使用的样式
    E:nth-child(odd):对奇数序号元素使用的样式
    E:nth-child(even):对偶数序号元素使用的样式
  12. E:nth-last-child:对倒数指定序号的元素使用的样式(使用方法同理nth-child)
  13. E:nth-of-type:对相同类型中指定序号的元素使用的样式。(使用方法同理nth-child,与nth-child的区别是,此伪类在计算子元素序号时只针对相同类型的元素)
  14. E:nth-last-of-type:对相同类型中倒数指定序号的元素使用的样式。(使用方法同理nth-child)
  15. E:only-child:对唯一子元素使用的样式。(同:E:nth-child(1):nth-last-child(1)  或  E:nth-of-type(1):nth-last-of-type(1))

UI元素状态伪类选择器

  1. E:hover:用来指定当鼠标指针移动到元素上面时元素所使用的样式
  2. E:active:用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。
  3. E:focus:用来指定元素获得光标焦点时使用的样式。
  4. E:enabled:用来指定当元素处于可用状态时的样式
  5. E:disabled:用来指定当元素处于不可用状态时的样式
  6. E:read-only:用来指定当元素处于只读状态时的样式
  7. E:read-write:用来指定当元素处于非只读状态时的样式
  8. E:checked:用来指定当表单中的radio单选框或checkebox复选框处于选取状态时的样式。
  9. E:default:用来指定当页面打开时默认处于选取状态时的单选框或者复选框的样式。注:即使用户将该单选框或复选框控件的选取状态手动设定为非选取状态时,E:default指定的样式依然生效,不随着状态改变而改变
  10. E:indeterminate:用来指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整租单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定。
  11. E:selection:用来指定当元素或者文本处于选中状态时的样式。

通用兄弟元素选择器

  1. E~E:用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式

注:所有浏览器的支持情况需要在使用时做具体的测试,个别样式需要加-moz-、-webkit-等前缀这里不做表明,这里只做标准展示