CSS选择器笔记，element element和element

CSS选择器笔记，element element和element > element 的区别

看官方解释

element element 例子: div p 官方解释:div内部所有的p元素

就是说只要p在div内部。如果 p在span内部，span在div内部，p也算在div内部

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 div p
 6 {
 7 background-color:yellow;
 8 }
 9 </style>
10 </head>
11 <body>
12 
13 <div>
14 <p>段落 1。 在 div 中。</p> <!--黄色背景-->
15 <p>段落 2。 在 div 中。</p> <!--黄色背景-->
16     <span><p>121234</p></span> <!--黄色背景-->
17 </div>
18 
19 <p>段落 3。不在 div 中。</p>
20 <p>段落 4。不在 div 中。</p>
21 
22 </body>
23 </html>

element > element 例子 div > p ，官方解释: 选择父元素为 <div> 元素的所有 <p> 元素。

p在span内部，span在div内部，p这时的父元素不是div而是span,那么p没有被中，p是div孙子元素

<!DOCTYPE html>
<html>
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2> 
<p>I live in Duckburg.</p> <!--黄色-->
</div>

<div>
<span><p>I will not be styled.</p></span> <!--p在span里。但是p的父元素是span，所以这里不是黄色-->
</div>

<p>My best friend is Mickey.</p>
</body>
</html>