一個是子類選擇器,一個是後代選擇器。
div>p 是子類選擇器,選擇所有div的所有子元素中p元素(不包括孫子類元素)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
div > p {
color: red;
}
</style>
</head>
<body>
<div>
<span>
<p>1</p>
</span>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<hr>
<b>div>p選中了2 3 4</b>
</body>
</html>
效果如下所示:div p 是後代選擇器,選擇所有div中所包含的所有p元素(包括孫子類元素)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<span>
<p>1</p>
</span>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<hr>
<b>div p選中了1 2 3 4</b>
</body>
</html>
效果如如下所示: