CSS選擇器筆記，element element和element > element 的區別

c3tc3tc3t發表於2015-11-01
CSS筆記

看官方解釋

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>

 

相關文章