元素之间的五种关系
- 父元素:直接包含子元素的元素叫父元素。
- 子元素:直接被父元素包含的元素是子元素。
- 祖先元素:直接或间接包含后代元素的元素叫做后代元素的祖先元素。子元素的父元素也是祖先元素,父元素只有一个,祖先元素可以有多个。
- 后代元素:直接或间接被祖先元素包含的元素称为后代元素。
- 兄弟元素:拥有相同父元素的元素是兄弟元素。
父子兄弟选择器(关系选择器)
- 子元素选择器:选中指定父元素中的指定子元素。
语法:父元素 > 子元素 - 后代选择器:选中指定元素中的指定后代元素。
语法:祖先元素 后代元素 - 兄弟选择器(2种):
作用:选中紧贴指定元素后的一个兄弟元素。
语法:前一个元素 + 后一个元素
注:必须是紧贴的兄弟元素才能被选中,如中间被其他元素隔开则不能选中。
作用:选中指定元素后面所有的兄弟元素。
语法:兄 ~ 弟
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div > span{
color: red;
}
div span{
font-size: large;
}
div > p > span{
color: green;
}
p + span{
color: orange;
}
p ~ span{
font-size: smaller;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
<span>我是div中的span</span>
<span>我是div中的span</span>
<span>我是div中的span</span>
</div>
</body>
</html>