CSS3选择器

基本选择器

• 回顾选择器
  • 通配符选择器
  • 元素选择器
  • 类选择器
  • ID选择器
  • 后代选择器
• 新增基本选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器
  • 群组选择器

子元素选择器

概念：子元素选择器只能选择某元素的子元素

语法：父元素 > 子元素 （Father>Children）

兼容性：IE8+、Firefox、Chrome、Safari、Opera

相邻兄弟元素选择器

概念：相邻兄弟选择器可以选择紧接在另一个元素后的元素，而且她们具有同一个相同的父元素

语法格式：元素 + 兄弟相邻元素 (Element + Sibling)

兼容性：IE8+、Firefox、Chrome、Safari、Opera

通用兄弟选择器

概念：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素

语法格式：元素 ~ 后面所有兄弟相邻元素 (Element ~ Siblings)

兼容性：IE8+、Firefox、Chrome、Safari、Opera

群组选择器

概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

语法格式：元素1，元素2.....，元素n

兼容性：IE6+、Firefox、Chrome、Safari、Opera

Element[attribute]

概念：选择所有带有attribute属性的元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute="value"]

概念：选择所有使用 attribute="value"的元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute~="value"]

概念：选择attribute属性包含单词“value”的元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute^="value"]

概念：选择attribute属性值以“value”开头的所有元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute$="value"]

概念：选择attribute属性值以“value”结尾的所有元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute*="value"]

概念：选择attribute属性值包含“value”的所有元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element[attribute|="value"]

概念：选择attribute属性值为“value”或以“value-”开头的元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

伪类选择器

• 动态伪类
• UI元素状态伪类
• CSS3结构类
• 否定选择器
• 伪元素

动态伪类

这些伪类不存在于HTML中，只有当用户和网站交互的时候才能体现出来

• 锚点伪类
  • :link
  • :visited
• 用户行为伪类
  • :hover
  • :active
  • focus

UI元素状态伪类

概念：把":enabled"，":disabled"，":checked"伪类称为UI元素状态伪类

兼容性：IE9+、Firefox、Chrome、Safari、Opera

:nth选择器

我们把css3的:nth选择器也成为CSS3结构类

选择方法：

• :first-child
• :last-child
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-child
• :only-child
• :only-of-type
• :empty

Element:first-child

概念：选择属于其父元素的首个子元素的每个Element元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element:last-child

概念：选择属于其父元素的最后一个子元素的Element元素

兼容性：IE8+、Firefox、Chrome、Safari、Opera

Element:nth-child(N)

概念：:nth-child(N)选择器匹配属于其父元素的第N个子元素，不论元素的类型

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

关于参数(N)

• Element:nth-child(number) ———— 选择某元素下的第number个element元素

• Element:nth-child(n) ———— n是一个简单表达式，取值从”0“开始计算。这里只能是"n"，不能是其他字母代替

• Element:nth-child(odd)、Element:nth-child(even) ———— odd和even是可用于匹配下标是奇数或偶数的element元素的关键字（第一个下标是1）

Element:nth-last-child(N)

概念：匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:nth-last-of-type(N)

概念：匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:last-of-type(N)

概念：:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:only-child(N)

概念：:only-child 选择器匹配属于其父元素的唯一子元素的每个元素

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:only-of-type(N)

概念：:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

Element:empty

概念：:empty 选择器匹配没有子元素（包括文本节点）的每个元素

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

否定选择器

概念：:not(Element/Selector)选择器匹配非指定元素/选择器的每个元素

语法格式：父元素:not（子元素|子选择器）(Father:not(Children|selector))

兼容性：IE9+、Firefox4+、Chrome、Safari、Opera

伪元素

伪元素 ———— Element::first-line

概念：根据”first-line“伪元素中的样式对element元素的第一行文本进行格式化

说明：”first-line“伪元素只能用于块级元素

伪元素 ———— Element::first-letter

概念：用于向文本的首字母设置特殊样式

说明：”first-letter“伪元素只能用于块级元素

伪元素 ———— Element::before

概念：在元素的内容前面插入新内容

说明：常用content配合使用

特点：

• 永远是第一个子元素
• 行级元素
• 内容通过content写入
• 标签中找不到对应的标签

伪元素 ———— Element::after

概念：在元素的内容后面插入新内容

说明：常用content配合使用，多用于清除浮动

伪元素 ———— Element::selection

概念：用于设置在浏览器中选中文本后的背景与前景色

兼容性说明：::selection在IE家族中，只用IE9+版本支持，在firefox上要添加前缀-moz

CSS权重

• 什么是权重

当很多规则被应用到某一个元素上时，权重是一个决定那种规则生效，或者是优先级的过程

• 权重等级与权值

行内样式（1000）>ID选择器（100）> 类、属性选择器和伪类选择器（10）> 元素和伪元素（1）> *（0）

• 权重计算口诀

从0开始，一个行内样式+1000，一个ID+100，一个属性选择器、class或者伪类选择器+10，一个元素名或者伪元素+1