基本选择器和层次选择器

  1. 通配符选择器（＊）
    • 所有浏览器支持通配符选择器
    • 权重最低
  2. 元素选择器(E)
    • 所有浏览器支持元素选择器(E)
  3. 类选择器（.className）
    • 所有浏览器都支持类选择器
    • 多类选择器（.className1.className2）不被ie6支持
  4. Id选择器（#ID）
    • 所有浏览器都支持ID选择器
    • 具有唯一性使用id选择器
  5. 后代选择器（Ｅ Ｆ）
    • 所有浏览器都支的后代选择器
  6. 子元素选择器(E>F)
    • IE6不支持子元素选择器。
  7. 相邻兄弟元素选择器(E + F)
    • IE6不支持这个选择器
    • EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素
  8. 通用兄弟选择器（Ｅ 〜 Ｆ）
    • IE6不支持这种选择器的用法
    • E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素
  9. 群组选择器（selector1,selector2,…,selectorN）
    • 所有浏览器都支持群组选择器

**

属性选择器

  1. E[attr]：只使用属性名，但没有确定任何属性值；
  2. E[attr=”value”]：指定属性名，并指定了该属性的属性值；
  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）;

**

伪类选择器

  1. 动态伪类选择器（爱恨原则LoVe/HAte,也就是Link—visited—hover—active）
    • :link /链接没有被访问时/
    • :visited /链接已被访问过/
    • :hover /用于当用户把鼠标移动到元素上面时的效果；(IE6只支持a:hover)/
    • :active /用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了,IE7以下不支持）/
    • :focus /用于元素成为焦点，这个经常用在表单元素上。(IE7以下不支持)/
    • 对于:hover在IE6下只有a元素支持，:active只有IE6-7不支持，:focus在IE6-7下不被支持。
  2. UI元素状态伪类选择器
    • “:enabled”,”:disabled”,”:checked”伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作，最常见的比如我们”type=”text”有enable和disabled两种状态，前者为可写状态后者为不可状态；另外”type=”radio”和”type=”checkbox””有”checked”和”unchecked”两种状态。
    • IE6-8不支持”:checked”,”:enabled”,”:disabled”这三种选择器。
    • 示例：input[type=”text”]:disabled {border:1px solid #999;background-color: #fefefe;}
  3. 目标伪类选择器
    • E:target
      • 选择匹配E的所有元素，且匹配元素被相关URL指向
      • IE8以下不兼容
  4. 结构伪类选择
    • :first-child
      • 选择某个元素的第一个子元素；
      • ie6不兼容
    • :last-child
      • 选择某个元素的最后一个子元素
      • ie8以下不兼容
    • :nth-child(n)
      • 选择某个元素的一个或多个特定的子元素
      • 这里的“n”只能是”n”，不能使用其他字母代替，不然会没有任何效果的（”n”不能为负值）
      • IE6-8和FF3-浏览器不支持”:nth-child”选择器。
      • 示例
        • :nth-child(3) /第三个元素/
        • :nth-child(2n) /偶数的元素，等于”:nth-child(even)”效果/
        • :nth-child(2n-1) /奇数的元素，等于”:nth-child(odd)”效果/
        • :nth-child(n+5) /选择第五个后面的元素/
        • :nth-child(-n+5) /选择第五个前面的元素/
        • :nth-child(4n+1) /隔三选一/
    • :nth-last-child(n)
      • 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
      • :nth-child()是从元素的第一个开始计算，而:nth-last-child()是从元素的最后一个开始计算，他们的计算方法都是一样的。
      • IE6-8和FF3.0-浏览器不支持”:nth-last-child()”选择器。
    • :nth-of-type()
      • 其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器
      • 示例：.demo p:nth-of-type(even) {background-color: lime;}
      • IE6-8和FF3.0-浏览器不支持这种选择器
    • :nth-last-of-type()
      • 类似于:first-child和:last-child;不同之处就是指定了元素的类型。
      • IE6-8和FF3.0-浏览器不支持这种选择器
    • :first-of-type和:last-of-type
      • 类似于:first-child和:last-child;不同之处就是指定了元素的类型。
      • ie8以下不兼容
    • :only-child
      • 选择的元素是它的父元素的唯一一个了元素；
      • IE6-8浏览器不支持:only-child选择器；
    • :only-of-type
      • 选择一个元素是它的上级元素的唯一一个相同类型的子元素
      • IE6-8和FF3.0-浏览器不支持:only-of-type选择器。
    • :empty
      • 选择的元素里面没有任何内容。
      • IE6-8浏览器不支持:empty选择器
  5. 否定选择器（:not）
    • 让你定位不匹配该选择器的元素
    • IE6-8浏览器不支持:not()选择器
    • 示例：input:not([type=”submit”]) {border: 1px solid red;}
  6. 语言伪类选择器
    • E:lang(language)
    • 选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language
  7. 伪元素 (两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。)
    1. ::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
    2. ::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉
    3. ::before和::after
      • 这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用
      • 示例
        • .clearfix:before,
        • .clearfix:after {
        • content: “.”;
        • display: block;
        • height: 0;
        • visibility: hidden;
        • }
        • .clearfix:after {clear: both;}
        • .clearfix {zoom: 1;}
    4. ::selection用来改变浏览网页选中文的默认效果
      • IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。Firefox 支持替代的 ::-moz-selection。
      • 只能设置两个属性，一个就是background,另一个就是color属性，设置其他属性是没有任何效果的。
      • 示例
        • /Webkit,Opera9.5+,Ie9+/
        • ::selection {
        • background: 颜色值；
        • color:颜色值；
        • }
        • /Mozilla Firefox/
        • ::-moz-selection {
        • background: 颜色值；
        • color:颜色值；
        • }

**

浏览器如何识别你的选择器

  1. 浏览器读取选择器的顺序是由右到左进行
  2. 越具体的关键选择器，其性能越高

**

CSS选择器的效率（从高到低）

  1. id选择器（#myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div,h1,p）
  4. 相邻选择器（h1+p）
  5. 子选择器（ul > li）
  6. 后代选择器（li a）
  7. 通配符选择器（*）
  8. 属性选择器（a[rel=”external”]）
  9. 伪类选择器（a:hover,li:nth-child）