2 занятия по css подряд

Question

очень простой вопрос, но я ничего не смог найти по этому поводу.

прежде всего, вот картинка ..

Я нашел пример кода,

почему люди пишут класс как:

.card .additional {

bla bla 
}

в чем разница между этим и отдельно

.card {
bla bla
}

.additional {
bla bla
}

Надеюсь, вопрос был ясен. Я не знаю, как функционировать подобные вызовы, чтобы я ничего не нашел в inte rnet. Надеюсь на ответ здесь ^^

Answer 1

Эти два совершенно различны.

Если у вас есть требование иметь css свойства для класса .additional{...}, у которого .card{...} есть только родитель, тогда вы должны написать код ниже.

.card .additional{background:red;} среднее выделение .additional класс ТОЛЬКО с .card в качестве родителя.

Демонстрация:

.card .additional {
  background: red; /* applies to only child(additional) class */
}

<div class="card">Card
  <div class="additional">additional-1</div>
  <div class="additional">additional-2</div>
</div>

Независимые классы:

У вас есть требование, хотя card{...} является родителем для additional{...}, но вы все еще хотите иметь независимые css свойства, когда вы должны использовать приведенный ниже код.

.card{...} и .additional{....} являются независимыми классами.

.card {
  background: red;
}

.additional {
  background: green;
}

<div class="card">card
  <div class="additional">additional-1</div>
  <div class="additional">additional-2</div>
</div>

Answer 2

.card .additional будет применять стили только к элементам с классом additional, которые являются потомками элемента с классом card:

<div class="card">
    <div class="additional"></div> <!-- will have .card .additional styles applied -->
</div>
<div class="card"></div> <!-- will not have .card .additional styles applied -->

.card соответствует элементам только по их классу card :

<div class="card">
    <div class="additional"></div>
</div> <!-- will have .card styles applied -->
<div class="card"></div> <!-- will have .card styles applied -->

.additional соответствует элементам только по их классу additional:

<div class="card">
    <div class="additional"></div> <!-- will have .additional styles applied -->
</div>
<div class="card"></div>