CSS3选择器

1.基础选择器

• 通配符选择器 *
• ID选择器 #Id
• class选择器 .classname
• 元素选择器 tagName
• 群组选择器 slecter,selecter

2.层次选择器

• 后代选择器 ul li
• 子元素选择器 ul>li（孙元素不选择）
• 相邻兄弟选择器 E+F(紧贴在E元素之后的下一个兄弟元素F)
• 通配兄弟选择器 E~F(选择E元素之后的所有兄弟元素F)

3.属性选择器

• 元素a[属性1] a元素包含属性1的元素
• selecter[attr=val] arrt属性值是val的元素
• seldcter[attr^=val] attr属性值是以val开头的元素
• selecter[attr$=val] attr属性值是以val结束的元素
• selecter[attr~=val] attr属性值是val 或 包含val（两个值以空格隔开，其中一个是val)
• selecter[*=val] attr属性值中出现val字符的元素
• selecter[|=val] attr属性值是val或值是以val-开头

4.伪类选择器

• 动态伪类选择器

  • E:link（未被访问的链接）
  • E:visited（已经被访问）
  • E:hover(悬浮在元素上方）
  • E:active（被激活，即点击时）
  • E:focus（对象成为焦点时）

• 目标伪类选择器

  • E:target(匹配相关URL指向的E元素)

• 语言伪类选择器

  • E:lang(en/zh)
  • 等价于E[lang="en/zh"]

• UI元素伪类选择器

  • E:enabled(选择每个启用的元素)
    • 把E:focus放在其后才会有focus效果
  • E:diabled(用于被禁用状态的表单元素)
  • E:checked(处于被选中状态的元素E)
    • 用于input type为radio与checkbox时

• 结构伪类选择器

  • :root 根元素选择器(只用于html)
  • E:first-child（父元素的第一个子元素E）
  • E:last-child (最后一个子元素E)
  • E:nth-child(n) (父元素的第n个子元素E)
  • E:nth-last-child(n) (父元素的倒数第n个子元素E)
  • E:only-child (仅有一个子元素E)
  • E:first-of-type (同类型中的第一个同级兄弟元素E)
  • E:last-of-type (同类型中的最后一个同级兄弟元素E)
  • E:nth-of-type(n) (同类型中的第n个同级兄弟元素E)
  • E:nth-last-of-type(n) (同类型中的倒数第n个同级元素)
  • E:only-of-type(同类型中的唯一的一个同级兄弟元素E)
  • E:empty 匹配空的元素(不能有子元素也不能有内容，空格也不行)

• 否定伪类选择器

  • :not(E)(选择E元素之外的每个元素)

5.伪元素选择器

• :first-letter / ::first-letter 第一个字母
• :first-line / ::first-line 第一行
• E: before / ::before（在每个E元素的内容之前插入内容）
  • 需要和content属性一起使用
  • 如a::before{content:"文字/url(图片地址)/不写"；再设其他属性；
• : after / ::after（在每个E元素的内容之后插入内容，类似before）
  • 可以用来清除浮动
• ::placeholder(设置对象文字占位符的样式)
• ::selection（设置对象被选中的样式）