css选择器

层次选择器	类 型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

例如：
body p{ background: red; } body下所有p标签
body>p{ background: pink; } bod下第一层子级所有p标签
.active+p { background: green; } 类active后边第一个p标签颜色改变
.active~p{ background: yellow; } 类active后边所有p标签颜色改变

结构伪类选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

例如：
ul li:first-child{ background: red;} ul内第一个li标签
ul li:last-child{ background: green;} ul内最后一个li标签
p:nth-child(1){ background: yellow;} p标签内第一个子元素
p:nth-of-type(2){ background: blue;} 选择所有p元素第二个为p的子元素
⭐ 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

例如：
a[id] { background: yellow; } a元素，包含id属性
a[id=first] { background: red; } a元素，包含id属性，且属性值为first
a[href^=http] { background: red; } a元素含有href属性，属性值http开头
a[href$=png] { background: red; } a元素含有href属性，并且属性值png结尾
a[class*=links] { background: red; } a元素都含有class属性，且属性值包含links字符