CSS3选择器

1 CSS中的伪元素选择器

 选择器：伪元素{属性：值；}

• first-line

    用于向某个元素中的第一行文字使用样式。

• first-letter

    用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。

• before

   用于在某个元素所有内容之前插入一些内容。

• after

   用于在某个元素所有内容之后插入一些内容。 

2 CSS3 中的结构性伪类选择器 

共同特征：允许开发者根据文档树中的结构来指定元素的样式。

•  root选择器

：root{属性：值；}

将样式绑定到页面的根元素中。（html元素） 

• not选择器

 排除，筛选元素。

• empty选择器

 ：empty{属性：值；}

指定当元素中内容为空白时的样式。

• target选择器

点击页面中的超链接跳转到目标元素后的样式。 

• first-child、last-child

指定父元素中的第一个子元素、最后一个子元素 。

li：first-child{ background-color：red }

li：last-child{ background-color：yellow }

• nth-child、nth-last-child

针对父元素中某个指定序号的子元素来指定样式。 （针对所有子元素计算）

li：nth-child（2）{ background-color：red }（第二个子元素）

li：nth-last-child（2）{ background-color：yellow }（倒数第二个子元素）

li：nth-child（odd）{ background-color：red }（所有正数下来第偶数个子元素）

li：nth-last-child（even）{ background-color：yellow }（所有倒数上去第奇数个子元素）

循环使用样式：

an+b形式（a表示每次循环中共包括几种样式，b表示指定的样式在循环中所处位置）

li：nth-child（4n+1）{ background-color：red }

li：nth-child（4n+2）{ background-color：yellow}

li：nth-child（4n+3）{ background-color：blue}

li：nth-child（4n+4）{ background-color：black }

• nth-of-type、nth-last-of-type

针对同类型的子元素计算奇/偶数 或序号。

h2:nth-of-type(odd){  background-color：red }（所有h2中的正数第偶数个子元素）

h2:nth-of-type(even){  background-color：yellow }（所有h2中的正数第奇数个子元素）

• only-child

指定当某父元素中只有一个子元素时才使用的样式。

 li：only-child  { background-color：black }

• only-of-type

指定当某父元素中有且只有该类型的一个子元素时才使用的样式。

2 CSS3 中的UI元素状态伪类选择器

共同特征：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用 

       鼠标悬浮、激活、获得焦点时的样式 

• E：hover、E：active、E：focus

• E：enabled、E：disabled

       用来指定当元素处于可用/不可用状态时的样式。

• E：read-only、E:read-write 

      用来指定当元素处于只读/非只读状态时的样式 

   （火狐需加-moz-前缀）

• E：checked、E：default、E：indeterminate

E：checked：用来指定表单中的单选框或复选框处于选取状态时的样式。

E：default：用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式，若用户取消选取状态样式仍然有效。

E：indeterminate：用来指定当打开页面时，一组单选框中没有任何一个单选框被设定被选取状态时整组单选框的样式。若用户选取任何一个单选框，该样式被取消指定。

• E：：selection

用来指定当元素处于选中状态时的样式。（火狐需加-moz-前缀）

• E：invalid、E：valid

E：invalid：用来指定，当元素内容不能通过H5通过使用元素的诸如require、pattern等属性所指定的检查或元素内容不符合元素的规定格式时的样式。

E：valid：用来指定，当元素内容通过H5通过使用元素的诸如require、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式。

• E：required、E：optional

 E：required：用来指定允许使用required属性，且已经指定了required属性的input元素、select元素以及textarea元素的样式。

 E：optional：用来指定允许使用optional属性，且未指定了optional属性的input元素、select元素以及textarea元素的样式。

• E：in-range、E：out-of-range

E：in-range：用来指定当元素的有效值被限定在一段范围分为之内（通常通过min与max属性值范围内是来限定），且实际输入值在该范围内时使用的样式。

E：out-of-range：用来指定当元素的有效值被限定在一段范围之内（通常通过min与max属性值范围内是来限定），且实际输入值在该范围之外时使用的样式。

3 CSS3 中的通用兄弟选择器

用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

<子元素> ~<子元素之后的同级兄弟元素>{  // 指定样式 }

div ~p{ background-color：black; }（对所有div元素之后的，与div元素处于同级的p元素指定其背景色