<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
div > p{
color:red;
}
p > span{
color:blue;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
</div>
<span>我是div外的span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
div > p > span{
color:green;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
</div>
<span>我是div外的span</span>
</body>
</html>
- 后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
div span{
color:red;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
</div>
<span>我是div外的span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
div + span{
color:red;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
</div>
<span>我是div外的span</span>
<span>我是div外的span</span>
<span>我是div外的span</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系选择器</title>
<style>
div ~ span{
color:red;
}
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p元素
<span>我是p中的span元素</span>
</p>
</div>
<span>我是div外的span</span>
<span>我是div外的span</span>
<span>我是div外的span</span>
</body>
</html>