最近在笔试的时候经常遇到CSS选择器的题目，做的时候感觉一时间想起来的有点混乱，就准备来整理一下。

简单的标签选择器、类选择器、id选择器这里不再说明。

优先级总的规则是!important>内联样式>ID>类、属性、伪类>类型、伪元素，同等级情况下后声明的样式会覆盖先声明的样式。

div p

div下面的所有p,可以非直接

div>p

div下面的直接后代p

p+p

相邻的两个同级p，定义的是第二个p的样式

p~p

可以不相邻的两个p，定义的是第二个p的样式

A[B]

带有B属性的A

A[B=”value”]

B属性的值为value的A，完全匹配

A[B*=”value”]

B属性带有value的A，不完全匹配

A[B^=”value”]

所有B属性以value开头的A

A[B$=”value”]

所有B属性以value结尾的A

A[data-*=”value”]

自定义属性data-*的值为value的A

A[foo~=”value”]

定义取值带有空格的属性，其属性值包含value

A:not[b]

不是b的A，b可以取id值

p：：first-line

p的第一行

A：nth-child（n）

第几个A，从1开始

A:nth-of-type(n)

第几个A

A:nth-last-of-type(n)

倒数第几个A

A:first-child

第一个p

div p:only-child

div下面只有一个p没有其他东西的情况下

div p:only-of-type

div只有一个p