关系选择器

关系选择器

父元素： 直接包含子元素的元素叫父元素

子元素： 直接被父元素包含的元素是子元素

祖先元素： 直接或间接包含后代元素的元素叫祖先元素；一个元素的父元素也是它的祖先元素

后代元素： 直接或间接被祖先元素包含的元素叫后代元素；子元素也是后代元素

兄弟元素： 拥有相同父元素的元素是兄弟元素

子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

例子：

div.box > span{
	color:orange;
}

---

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先 后代（中间为空格）

例子：

div span{
	color:skyblue;
}

---

兄弟元素选择器

作用：
a）选择下一个兄弟
b）选择下边所有的兄弟

语法：
a）前一个 + 下一个
b）兄 ~ 弟

例子：

p + span{
	color:red;
}
p ~ span{
	color:red;
}

---