一、层次选择器

---

 

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

 

二、结构伪类选择器

---

 

例如：
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)在父级里先看类型，再看位置

 

三、属性选择器

---

 

例如：
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字符