具有多个子类的选择器的 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>

假设我想让 row1 内的 col1、col2、col3 的宽度都相同。我尝试了这个 css，但它并不局限于 row1：

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

我可能可以在每个 .col 前面添加 #row1，但这看起来不太好。这样做的正确方法是什么？

Answer 1

应该这样做：

#row1 > div
{
    width: 80px;
}

该规则适用于作为 #row1 子级的每个 div 元素。我指定了一个子选择器（>），以防您不想应用规则的嵌套 div 元素。

Answer 2

我也许可以在每个 .col 前面添加#row1，但这看起来不太好。正确的做法是什么？

这是唯一的方法，至少可以得到你所描述的规则。

使用您拥有的标记，您可以获得相同的效果：

#row1 div