CSS选择器总结 - Jesse131

选择器             　  优先级                 实例
id选择器         　　100
类选择器        　　  10
伪类选择器　　　　 10                    :link :visited :focus :hover :actived :lang
　　ui元素状态伪类 　　　　　　 　　e:enabled{}匹配所有用户界面（form表单）中处于可用状态的e元素
　　　　　　　　　　　　　　　　　　e:disabled{}匹配所有用户界面（form表单）中处于不可用状态的e元素
　　　　　　　　　　　　　　　　　　e:checked{}匹配所有用户界面（form表单）中处于选中状态的e元素
　　结构性伪类 　　　　　　　　 　　 e:first-child{}匹配父元素中第一个e元素
　　　　　　　　　　　　　　　　　　e:last-child{}匹配父元素中最后一个e元素
　　　　　　　　　　　　　　　　　　e:nth-child(n){}匹配第n个子元素e
　　　　　　　　　　　　　　　　　　e:nth-last-child(n){}匹配倒数第n个结构子元素e
　　　　　　　　　　　　　　　　　　e:nth-of-type(n){}匹配同类型中的第n个同级兄弟元素e
　　　　　　　　　　　　　　　　　　e:nth-last-of-type(n){}匹配同类型中的倒数第n个同级兄弟元素e
　　　　　　　　　　　　　　　　　　e:first-of-type{}匹配同级兄弟元素中的第一个e元素
　　　　　　　　　　　　　　　　　　e:only-child{}匹配属于父元素中唯一子元素的e
　　　　　　　　　　　　　　　　　　e:only-of-type{}匹配属于同类型中唯一兄弟元素的e
　　　　　　　　　　　　　　　　　　e:root{} 不常用 匹配文档的根元素。在html中，根元素永远是html
　　　　　　　　　　　　　　　　　　e:empty{} 不常用 匹配没有任何子元素（包括text节点）的元素e
　　否定伪类 　　　　　　　　　　　  p:not(s){}匹配所有不匹配简单选择符s的元素p
　　目标伪类 　　　　　　　　　　　  不常用
属性选择器        　　10
　　简单属性选择器　　　　　　　　   h1[foo]{color:red;}
　　具体属性值选择器　　　　　　　　h1[foo="sun"]{color:red;} 选择foo属性值是sun的所有h1元素
　　子串匹配属性选择器　　　　　　　h1[foo*="sun"]{color:red;} 选择foo属性值中包含sun的所有h1元素
　　　　　　　　　　　　　　　　　　h1[foo^="sun"]{color:red;} 选择foo属性值以sun开头的所有h1元素
　　　　　　　　　　　　　　　　　　h1[foo$="sun"]{color:red;} 选择foo属性值以sun结尾的所有h1元素
元素选择器　　　　　 1
　　子元素选择器 　　　　　　　　　　h1 > span{color:red;}
　　相邻兄弟元素选择器 　　　　　　　h1 + h1{font-size:20px;}
伪元素选择器 　　　　 1　　　　　　　p::first-letter{}设置段落p的首字母样式
　　　　　　　　　　　　　　　　　　 p::first-line{} 设置段落p的首行样式
　　　　　　　　　　　　　　　　　　 p::before{} p::after{}
　　　　　　　　　　　　　　　　　　 p::selection{}设置被用户选取部分的样式