Синтаксис HTML для селектора с несколькими подклассами

Question

Я пытаюсь определить правило css для нескольких подкадров селектора. Вот пример HTML.

<div id="row1">
    <div class="col1">
    <div class="col2">
    <div class="col3">
</div>
<div id="row2">
    <div class="col1">
    <div class="col2">
    <div class="col3">
</div>

Скажем, я хочу сделать ширину col1, col2, col3 в строке1 одинаковой. Я пробовал этот CSS, но он не зависит от row1:

#row1 .col1, .col2, .col3{
    width: 80px;
}

Я, наверное, могу добавить # row1 перед каждым .col, но это будет выглядеть не так хорошо. Как правильно это сделать ??

Answer 1

Это должно сделать:

#row1 > div
{
    width: 80px;
}

Правило применяется к каждому элементу div, который является дочерним для #row1. Я указал дочерний селектор (>) на случай, если у вас есть вложенные элементы div, к которым вы не хотите применять правило.

Answer 2

Я, вероятно, могу добавить # row1 перед каждым .col, но это будет выглядеть не так хорошо.Как правильно это сделать ??

Это единственный способ сделать это, по крайней мере, получить правило, которое вы описываете.может получить тот же эффект с:

#row1 div