05css之高级选择器（层次选择器 、结构伪类选择器 、 属性选择器）

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)的 关键点：

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

• 属性选择器：
  

示例：

a[id] { background: yellow; }
a[id=first] { background: red; }
a[id=first] { background: red; }E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
a[class*=links] { background: red; }
a[href^=http] { background: red; }
a[href$=png] { background: red; }