CSS高级选择器

层次选择器

• 后代选择器

body p{
background: red;
}

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入

• 子选择器

body>p{
background: pink;
}

• 相邻兄弟选择器

.active+p {
background: green;
}

• 通用兄弟选择器

.active~p{
background: yellow;
}

结构伪类选择器

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

• 小结

E F:nth-child(n)在父级里从一个元素开始查找，不分类型 E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

• E[attr]属性选择器

a[id] {
background: yellow;
}

• E[attr=val]属性选择器

a[id=first] {
background: red;
}

• E[attr*=val]属性选择器

a[class*=links] {
background: red;
}

• E[attr^=val]属性选择器

a[href^=http] {
background: red;
}

• E[attr$=val]属性选择器

a[href$=png] {
background: red;
}

来源：oschina

链接：https://my.oschina.net/u/4504031/blog/4485583