复杂的CSS选择器

一.基本的CSS选择器：

1.通配符    例：*{...}

2.类别选择器   例：.container{...}

3.ID选择器       例：#div1{.....}

4.群组选择器   例：span,.class,#id{....}

5.并列选择器   例： div.class{.....}

6.子代选择器   例：div span{....}

7.直接子代选择器    例：div>span{....}

二.复杂的CSS选择器

复杂选择器	例子	含义	版本/兼容性
选1 + 选2	div+span{....}	相邻兄弟选择器：选择紧挨的下一个兄弟元素	2/IE6以下不支持
选1~选2	div~span{....}	通用兄弟选择器：选择选1所有的兄弟元素中与选2匹配的元素	3 注意：只匹配选1后的元素，之前的元素匹配不到
[属性名]	[title]	选择具有指定HTML属性的元素	2
[属性名=属性值]	[type=text]	匹配具有指定属性且属性值为指定值的元素	2
[属性名~=属性值]	[type~=text]	匹配具有指定属性且属性值中包含指定的完整的单词的元素（不是单词的不行）	3
[属性名*=属性值]	[class*=str]	匹配具有指定的属性且属性值中包含指定的字母组合(不必是完整的单词)	3
[属性名^=属性名]	[class^=str]	匹配具有指定的属性且属性值以指定的字母开头	3
[属性名$=属性值]	[class$=str]	匹配具有指定的属性且属性值以指定的字母结尾	3
[属性名|=属性值]		匹配具有指定的属性且属性值以指定的完整的单词开头(要么只有它，要么其后有-)	3
:target	:target{} div:target{}	目标伪类选择器；选定【当前锚点的】目标元素	IE8-不支持
:enabled	:enabled{...}	匹配当前启用的所有表单元素
:disabled	:disabled{...}	匹配当前禁用的所有表单元素
:checked	:checked{...}	匹配当前选中的表单元素
:first-child	span:first-child{} div  :first-child{}	匹配父元素中的第一个子元素（纯文本不算子元素）
:last-child	p:last-child{ } div  :last-child{}	匹配作为父元素中最后一个子元素出现的元素
:only-child	p:only-child{}	匹配作为父元素中唯一子元素出现的元素
:empty	div:empty{display:none;}	匹配没有子元素且没有任何文本内容的元素
:not(选1)	div:not(.strong){} span:not([class=content])	否定选择器；匹配不被选择器1选定的元素
::selection	::selection{  }	匹配一段文字中被选择部分

三.内容选择器：

选择器1:before{

     .....

     content:纯文本/图片/计数器;

}

选择器1:after{

     ....

     content:纯文本/图片/计数器;

}

注意：content属性必须配合:before/:after选择器使用。

计数器的使用：

body{

    counter-reset:计数器名  初始值 [计数器2名 初始值].... //计数器的初始化，默认值为0

}

p:before{

   counter:计数器名;

  counter-increment:计数器名 [步增值];

}