укладка в DIV в CSS

Question

Если есть сказать ДИВ

<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. Например, он будет соответствовать p в этом коде

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

Но это не будет соответствовать этому:

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

Answer 2

Для первого

CSS является только для укладки вам элементы, а не для показа HTML.

Для второго по

стилей всех элементов с именем класса «BB», которые являются детьми [не потомки] элементов с классом «а». См child selector

Ex 1

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

Ex 2

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

селектор детей будет только выбрать первый DIV с классом 'BB', а не внутренний DIV с классом 'BB'.

Answer 3

body - это особый элемент HTML. Чтобы стилизовать содержимое div с классом ref, ваш селектор CSS - это просто .ref, а не .ref body.

> в CSS называется детский селектор. Это означает, что элемент справа должен быть дочерним элементом слева. Итак:

.a > .bb будет соответствовать bb DIV здесь:

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

, но не здесь:

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