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

  

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

这是唯一的方法，至少要获得你描述的规则。

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

#row1 div

Answer 2

这应该做：

#row1 > div
{
    width: 80px;
}

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