我们在定义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)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!