css3选择器

一、属性选择器

• css2:
  1. E[foo]              E  且  有foo属性
  2. E[foo="bar"]     E  且  有foo属性值   且  foo属性值为bar
  3. E[foo~="bar"]   E  且  有foo属性值   且  foo属性值是用空格分隔的列表项，其中一个列表项值为bar， 如a[class~="bar"] <a class="x  bar m"> 
  4. E[foo|="bar"]    E  且  有foo属性值   且  foo属性值是用连字符‘-’分隔的列表项，列表项的开头为bar,   如a[class|="bar"] <a class="bar-x">
• css3:
  1. E[foo*="bar"]   E  且  有foo属性值   且  foo属性值包含bar ，   如a[class*="bar"] <a class="xxxbarsss"  />
  2. E[foo^="bar"]   E  且  有foo属性值   且  foo属性值以bar开头
  3. E[foo$="bar"]   E  且  有foo属性值   且  foo属性值以bar结尾

二、结构伪类选择器

　　利用文档结构树实现元素的过滤

• E:root               E所在文档的根元素
• E:empty　　      E  且  不包含子节点
• E:nth-child(n)         E  且  为第n个位置的子元素，n可以是数字(1 2 3)、关键字(odd even)、公式(2n  2n+1)
• E:nth-last-child(n)   E  且  为倒数第n个元素
• E:first-child            E   且  为第一个子元素
• E:last-child             E  且  为最后一次子元素
• E:only-child            E  且  为唯一一个子元素
• E:nth-of-type(n)　  　　E类型子元素  且   在第n个位置  
• E:nth-last-of-type(n)    E类型子元素  且  在倒数第n个位置
• E:first-of-type              E类型子元素  且  在第一个位置
• E:last-of-type               E类型子元素  且  在最后一个位置
• E:only-of-type              E类型子元素  且  只有一个

三、UI伪类选择器

     状态伪类选择器

• E:enabled
• E:disabled
• E:checked

四、其他选择器

• E~F                E、F同级  且  F在E的后面
• E:not:(select)   E           且  过滤掉select选择器
• E:target           E          且  E被相关url所指向 如： urlpath#id