css3选择器

CSS3 选择器

基础选择器

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

层次选择器

• 后代选择器 selecter selecter
• 子元素选择器 selcter>selecter
• 相邻兄弟选择器 selecter+selecter同一父元素中，其后面的一个兄弟元素
• 通配兄弟选择器 selecter~selecter同一父元素中，其后面的所有兄弟元素

属性选择器

• selecter[attr] 包含attr属性的元素
• 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=*

伪类选择器

• 动态伪类选择器

  • :hover
  • :link
  • :visited
  • :active
  • :focus 获取焦点时，适用于输入框

• 目标伪类选择器

  • E:target 匹配相关URL指向的E元素。
  • css样式 div:target
  • html样式 <a href="#box01">01</a>
<div id="box01"></div>

• 语言伪类选择器

  • E:lang(fr)匹配使用特殊语言的E元素

• UI元素伪类选择器

  • E:enabled
    • 匹配用户界面上处于可用状态的表单元素
  • E:diabled
    • 匹配用户界面上处于禁用状态的表单元素
  • E:checked
    • 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

• 结构伪类选择器

  • :root 根元素选择器,在html中根元素永远是html
  • :first-child 匹配父元素的的一个子元素（所有兄弟元素中第一个）
  • :last-child 最后一个
  • nth-child(n) 第n个子元素
  • nth-last-child(n) 倒数第n个子元素
  • only-child 匹配父元素仅有的一个子元素
  • first-of-type 第一个此类型的
  • last-of-type 最后一个此类型的
  • nth-of-type() 第n个此类型的
  • nth-last-of-type() 倒数第n个此类型的
  • only-of-type() 只有一个此类型的
  • empty 匹配空的元素(不能有子元素也不能有内容)

• 否定伪类选择器

  • not(selecter)匹配不含selecter选择的

伪元素选择器

• :first-letter / ::first-letter 第一个字母
• :first-line / ::first-line 第一行
• : before / ::before
• : after / ::after
• ::placeholder（设置对象文字占位符的样式）
• ::selection（设置对象被选择时的样式）