在CSS樣式一個div

Question

如果有一個div說

<div class="ref"><contents goes here</div> 

1. 如何在css中指定爲DIV .Meaning

   <style> 
   .ref body { 
       /* ref body contents goes here*/ 
       } 
   </style> 
   

   像上面什麼都可以的身體做了什麼？

2. 如果任何人能解釋下面還

   <style> 
       .a > .bb 
       { 
       } 
   </style> 
   

是什麼上面呢？

謝謝..

Answer 1

對於第一個，它不是完全清楚你的意思。只需使用.ref { /* CSS here */ }即可定位該div元素。如果你的意思是通過CSS添加內容，它使用:before和:after僞slectors是唯一可行的：

.ref:after { 
    content: "Some text"; 
} 

注意：你不能把HTML在那裏，只有文字。

---

對於第二個，它看起來與一類bb是a類的直接孩子的所有元素。例如，它會在這個代碼

<div class="a"> 
    <div>something</div> 
    <p class="bb">class bb</p> 
</div> 

匹配p但它不會匹配這樣的：

<div class="a"> 
    <div> 
     <p class="bb">class bb</p> 
    </div> 
</div> 

Answer 2

對於第一個

CSS是隻爲你的造型元素和不顯示HTML。

對於第二上

樣式類名「BB」，其是兒童[未後代]與類「A」的元素的所有元素。見child selector

例1

<div class="a"> 
    <div class="bb"></div> 
</div> 

例2

<div class="a"> 
    <div class="bb"></div> 
    <div> 
     <div class="bb"></div> 
    </div> 
</div> 

兒童選擇器將只選擇與類 'BB' 的第一個div和不與類內的div 'BB'。

Answer 3

body是一個特定的HTML元素。爲了設計一個ref類的div的內容，你的CSS選擇器只是.ref，而不是.ref body。

CSS中的>被稱爲子選擇器。這意味着右側的元素必須是左側元素的子元素。所以：

.a > .bb將在這裏匹配bb格：

<div class="a"><div class="bb"></div></div> 

但不是在這裏：

<div class="bb"></div>