Css3之选择器总结

CSS3选择器规范地址：    https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
CSS3选择最新选择器规范:  https://www.w3.org/TR/selectors  

CSS3选择器：

 1.基本选择器
  /*通配符选择器*/  * { margin: 0; padding: 0; border: none; }
  /*元素选择器*/   body { background: #eee; }
  /*类选择器*/  .list { list-style: square; }
  /*ID选择器*/   #list { width: 500px; margin: 0 auto; }
  /*后代选择器*/   .list li { margin-top: 10px; background: #abcdef; }
 

 2.基本选择器扩展
  /*子元素选择器*/  #wrap > .inner {color: pink;}
     也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
  /*相邻兄弟选择器*/  #wrap #first + .inner {color: #f00;}
     它只会匹配紧跟着的兄弟元素
  /*通用兄弟选择器*/  #wrap #first ~ div { border: 1px solid;}
     它会匹配所有的兄弟元素(不需要紧跟)
  /*选择器分组*/   h1,h2,h3{color: pink;} 
     此处的逗号我们称之为结合符
 

 3.属性选择器
  /*存在和值属性选择器*/ 
   [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
   [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
   [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

  /*子串值属性选择器*/
    [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
    [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
    [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
    [attr*=val] : 选择attr属性的值中包含字符串val的元素。
 

 4.伪类与伪元素选择器
  /*链接伪类*/  注意:link，:visited，:target是作用于链接元素的！
    :link   表示作为超链接，并指向一个未访问的地址的所有锚
    :visited 表示作为超链接，并指向一个已访问的地址的所有锚
    :target  代表一个特殊的元素，它的id是URI的片段标识符(#后面的内容)
  /*动态伪类*/  注意:hover，:active基本可以作用于所有的元素！
    :hover  表示悬浮到元素上
    :active   表示匹配被用户激活的元素（点击按住时）

    由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签
    身上时 :link和:visited不能放在最后！！！

    隐私与:visited选择器
     只有下列的属性才能被应用到已访问链接：
      color
      background-color
      border-color
  /*表单相关伪类*/
    :enabled 匹配可编辑的表单
    :disable 匹配被禁用的表单
    :checked 匹配被选中的表单
    :focus  匹配获焦的表单

  /*结构性伪类*/
    index的值从1开始计数！！！！
    index可以为变量n(只能是n)
    index可以为even odd
     #wrap ele:nth-child(index)  表示匹配#wrap中第index的子元素 这个子元素必须是ele
     #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
     除此之外:nth-child和:nth-of-type有一个很重要的区别！！
       nth-of-type以元素为中心！！！

    :nth-child(index)系列   
     :first-child
     :last-child
     :nth-last-child(index):倒着查找子元素
     :only-child  (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
    :nth-of-type(index)系列
     :first-of-type
     :last-of-type
     :nth-last-type(index)
     :only-of-type  (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

    :not 
    :empty(内容必须是空的，有空格都不行，有attr没关系)
  /*伪元素*/
    ::after
    ::before
    ::firstLetter
    ::firstLine
    ::selection
 

 5.css声明的优先级
  选择器的特殊性
   选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如    0,0,0,0
   一个选择器的具体特殊性如下确定：
          1.对于选择器中给定的ID属性值，加 0,1,0,0
          2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
          3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
          4.通配符选择器的特殊性为0,0,0,0
          5.结合符对选择器特殊性没有一点贡献
          6.内联声明的特殊性都是1,0,0,0
          7.继承没有特殊性

    特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
    选择器的特殊性最终都会授予给其对应的声明
    如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

    注意：id选择器和属性选择器
          div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）  
  重要声明
   有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
   并允许在这些声明的结束分号之前插入  !important  来标志
   必须要准确的放置  !important 否则声明无效。
   !important 总是要放在声明的最后，即分号的前面

    标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决，非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决，如果一个重要声明与非重要声明冲突，胜出的总是重要声明
  继承

   继承没有特殊性，甚至连0特殊性都没有， 0特殊性要比无特殊性来的强
 CSS样式 来源
   css样式的来源大致有三种
     创作人员
     读者
     用户代理  (浏览器) 

   权重：
      读者的重要声明
      创作人员的重要声明
      创作人员的正常声明
      读者的正常声明
      用户代理的声明
  层叠
   1.找出所有相关的规则，这些规则都包含一个选择器
      2.计算声明的优先级
                 先按来源排序
                 在按选择器的特殊性排序
                 最终按顺序