стилизация div в css

Question

Если есть div скажем

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

1. Как указать в CSS как тело div. Значение

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

   Можно ли сделать что-нибудь подобное выше?

2. Если кто-нибудь может объяснить ниже также

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

Что означает вышесказанное?

Спасибо ..

Answer 1

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>

Answer 2

Для первого не совсем понятно, что вы имеете в виду. Простое использование .ref { /* CSS here */ } нацелит этот элемент div. Если вы имеете в виду добавление контента через CSS, это возможно только с использованием псевдоселекторов :before и :after:

.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 3

Для первого

CSS предназначен только для стилизации ваших элементов, а не для отображения HTML.

Для второго на

стилизует все элементы с именем класса 'bb', которые являются потомками [не потомками] элементов с классом 'a'. См дочерний селектор

Пример 1

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

Пример 2

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

Дочерний селектор будет выбирать только первый div с классом 'bb', но не внутренний div с классом 'bb'.