CSS选择器

 1.属性选择器
    基于属性的不同方面匹配属性  [href]{}
    [attr="val"] 选择attr属性，且属性值为val
    [attr^="val"] 选择attr属性，且属性值为val打头的元素
    [attr$="val"] 选择attr属性，且属性值为val结尾的元素
    [attr*="val"] 选择attr属性，且属性值为包含val的元素
    [attr~="val"] 选择attr属性，且属性具有多个值，其中一个字符串为val
    [attr|="val"] 选择attr属性，且属性值为连字符分割的多个值，其中第一个字符串为val
2.选择兄弟元素
    使用相邻兄弟选择器可以选择紧跟在某元素之后的所有元素  p+a{}
    普通兄弟选择器只匹配相邻的下一个兄弟 p~a{}
3.伪类选择器
    ::first-line 选择匹配文本块的首行
    ::first-letter 选择文本块的首字母
    :before 在选中元素的内容之前插入内容
    :after    在选中元素的内容之后插入元素
    :root 选择匹配文档中的根元素
    :first-child 选择匹配由它所包含的第一个子元素
    :last-child 选择匹配由它所包含的最后一个子元素
    :only-child 选择匹配父元素包含的唯一子元素
    :only-of-type 选择器匹配父元素定义类型的唯一子元素
    :nth-child 指定一个索引匹配特定位置的子元素 类似的有 :nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n)

4.css计数器
    body{ counter-reset:paracount ;}  //设置计数器的名字,也可以设置多个计数器, counter-reset:paracount 10 other;paracount的初始值为10,other初始值为1
    p:before{content:counter(paracount)".";//将当前计数器的值呈现在选择器匹配的所有元素之前，此外还有在相应的值后面追加一个点，计数器的值默认是十进制
                        //也可以content:counter(paracount,lower-alpha)“.”，lower-alpha的功能是指定数值样式
         count-increment:paracount;}    //设置计数器增量，当前计数器默认为1,也可以 count-increment:paracount 2;
5.UI伪类选择器
    :enable 选择启动状态的元素    
    :disable  选择禁用状态的元素
    :checked  选中有checked属性或者用户勾选的单选按钮或者复选按钮
    :default   从一组类似的元素中选择默认元素
    :valid  匹配符合输入验证要求的input元素
    :invalid   匹配不符合输入验证要求的input元素
    :in-range   匹配指定范围内的input元素
    :out-of-range   匹配指定范围外的input元素
    :required   匹配具有required属性的input元素
    :optional  根据是否允许:required属性选择input元素
6.动态伪类选择器
    :link  选择链接元素
    :visited   选择用户已经访问的链接元素
    :hover   选择鼠标悬停在上面的元素
    :active  选择当前被用户激活的元素
    :focus   匹配当前获得焦点的元素
7.其他
    :not  对任意选择取反
    :empty 选择匹配没有定义任何子元素的元素
    :lang  选择匹配基于lang全局属性的元素
    :target  选择匹配URL片段标识符指向的元素