关于css选择器

 伪类：

 anchor伪类: a:link {} 、a:visited {}、a:hover {} 、a:active

 :first-child伪类:选择元素的第一个子元素,eg:
p:first-child

:only-child、:nth-child(n)、:nth-last-child(n)、:last-child、:first-of-type、:last-of-type、:only-of-type、:nth-of-type(n)、:nth-last-of-type(n)  

 :lang 伪类：为不同的语言定义特殊的规则

动态伪类：:focus

out-of-range、:in-range、:optional、:checked、 :root、:not(元素名)、 :target 用于包含该锚名称的点击的URL元素上

:read-write、:read-only、:required、:valid、:invalid、:empty、:enabled、:disabled      

伪类可以与 CSS 类配合使用：eg: a.red:visited {color:#FF0000;}

                                                      eg: q:lang(no){quotes: "~" "~";}  

                                                      eg: p > i:first-child{...;}

组合选择器：element,element、 element element、element>element、element+element、 element1~element2

                        后代选取器(以空格分隔)

                        子元素选择器(以大于号分隔）

                        相邻兄弟选择器（以加号分隔）

                        普通兄弟选择器（以破折号分隔）

id选择器：#id

通配选择器：*
类选择器（class selector）：.class

属性选择：[attribute^=value] 、[attribute$=value]、 [attribute*=value]、[attribute]、[attribute=value]、[attribute~=value]、[attribute|=language]                       

伪元素

:first-letter、:first-line、::selection、:before、:after    eg: p:before {content: attr(class);}

注意："first-line""first-letter"  伪元素只能用于块级元素。

:first-child 与:first-of-type的区别

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解

伪类和伪元素的区别：

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

X[data-*="foo"]

eg: a[data-filetype="image"] {

           color: red;

      }

 X[foo~="bar"]

`~`符号可以定位那些某属性值是空格分隔多值的标签

具体可查看：http://www.w3cschool.cn/css/css-selector.html