选择器权重

标签选择器           1

伪元素选择器        1

类选择器              10

属性选择器            10

id选择器                100

其他选择器  0， 如* 通配符

总权数值为 标签个数 * 1 + 伪元素个数 * 1 + 类选择器 * 10 + 属性选择器 * 10 + id选择器 *100

元素选择器

标签选择器         <a></a>       a{}

类选择器            <a class='name'></a>    .name{}

id选择器            <a id='name'></a>           #name{}

通配选择器        *

关系选择器

包含选择器    a p

子选择器        a>p

相邻选择器    a+p（紧邻a 后面的第一个p元素）      （li+li  除了第一个 后面的li都具有效果）

兄弟选择器   a~p{} (a 后面所有的p标签)

分组选择器   a,p{}  (同时满足  a 和 p 标签)

属性选择器

<h2 name='title-main logo' title='info'>这里是标题</h2>

h2[name]                              有 name 属性

h2[name][title]                     多属性 [][]

h2[name='title-main']           = name属性值为 title-main 

h2[name|='title-main']           |= 开头值 为 title-main   必须为一个完整的元素值-单词

h2[name~='logo']                  ~= 包含 titles ，必须为一个完整元素值-单词

h2[name^='title']                   ^= 开头属性值为  title，为一个元素     

h2[name$='in']                     $= 结尾属性值为in，为一个元素

h2[name*='in']                      *= 结尾属性值包含in，为一个元素

伪元素

:link            超链接a 未访问

:visited        超链接a 已访问

:hover         超链接a 鼠标悬浮时

:active        超链接a 鼠标按下 单机与释放直接

:focus        文本框聚焦时

:lang(zh)      使用特殊语言的E元素

:not(s)        不含有s元素的选择器

:root            (css3新增)html 根元素  

:first-child   

:last-child

:only-child     父元素仅有的一个子元素 <span><p>仅有的内容</p></span>   

:nth-child(n)  n为数字    第n个子元素   even  奇数   odd 偶数 

:last-type-of 

:empty

:checked

:target

:disabled

:enabled

伪类

:before         元素之前  与content一起 使用，属于文档流

:after            元素 之后 与content一起 使用，属于文档流     

:placeholder   表单输入框占位符的外观

:first-line   第一行

:first-letter  第一个字符