层次选择器

1.多类选择器：.a.b是要同时满足class="a b"

2.混合选择器：ul.a同时满足ul和class="a" #idm.a满足id="idm" class="a"

3.群组选择器：#idm,ul,.a满足以上三个条件任意一个

4.后代选择器：ul li空格隔开两选择器ul下所有的li

5.子代选择器：ul>li大于号隔开两选择器ul下一级的li，不包含下下级及更下级

6.相邻选择器：ul+a选择ul紧邻其后的a元素

7.通用选择器：ul~a选择ul后面所有的a元素

记忆方法

动态伪类选择器

:link用于a元素未访问

:visited用于a元素被访问后

:active用于a或btn被按下时

:hover鼠标悬浮

:focus获得焦点

示例

UI选择器

:checked特定控件选中

:enabled特定控件激活

:disabled特定控件禁用

示例

结构伪类选择器

E:first-child第一个子E元素，同样有last

E F:nth-child(n)第n个子F元素，n>0，n也可以写作3n+1(此时n从0开始即可)这种样式，同样有nth-last-child(n)

E:nth-of-type(n)第n个E

E:emptyE为空（标签中无任何东西）则选出

示例

伪元素

::before/after{}中必须有content:字段才能生效

::selection接受两个属性background和color

示例

属性选择器

E[attr]有属性attr的E

E[attr=val]属性attr为val的E

除了=之外还有~=指空格分开多个值有一个是val，*=含有val，^=以val开始，$=以val结尾

记忆方法