我们在定义css样式时经常用到div p 、div>p 和 div+p这三种形式来定义样式，由于形式很接近，所以经常容易搞混，今天我们就来把样式的这三种形式说说清楚。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式中div p 和 div>p 和 div+p三者有什么区别？www.woaidaogu.com</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎您访问我们的网站！</h1>
<div>
<h2>我们的主营产品</h2>
<p>无限蓝牙耳机</p>
</div>
<div>
<span><p>这里不会被作用样式</p></span>
</div>
<p>Apple 无限蓝牙耳机</p>
</body>
</html>
div>p意思是选择所有父级是 <div> 元素的 <p> 元素，以上面为例，
<div> <h2>我们的主营产品</h2> <p>无限蓝牙耳机</p> </div>
该p元素的父元素就是div，符合条件所以显示对应的颜色。而
<div> <span><p>这里不会被作用样式</p></span> </div>
这段文字并没有变色，因为p元素的父元素并不是div而是span。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式中div p 和 div>p 和 div+p三者有什么区别？www.woaidaogu.com</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎您访问我们的网站！</h1>
<div>
<h2>我们的主营产品</h2>
<p>无限蓝牙耳机</p>
</div>
<div>
<span><p>这里不会被作用样式</p></span>
</div>
<p>Apple 无限蓝牙耳机</p>
</body>
</html>
div p意思是选择<div>元素内的所有<p>元素 ，以上面为例，
<div> <h2>我们的主营产品</h2> <p>无限蓝牙耳机</p> </div>
<div> <span><p>这里不会被作用样式</p></span> </div>
这两段的内容都会变为设置的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式中div p 和 div>p 和 div+p三者有什么区别？www.woaidaogu.com</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎您访问我们的网站！</h1>
<div>
<h2>我们的主营产品</h2>
<p>无限蓝牙耳机</p>
</div>
<div>
<span><p>这里不会被作用样式</p></span>
</div>
<p>Apple 无限蓝牙耳机</p>
</body>
</html>
div+p意思是用于选择（不是内部）指定的第一个元素div之后紧跟的p元素。以上面为例，div紧跟的p元素是这里<p>Apple 无限蓝牙耳机</p>，所以这块内容就会变为设置的颜色。
通过以上内容我们知道了css样式中div p 和 div>p 和 div+p三者的区别，感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！
