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

假设我想让第 1 行中的 col1、col2、col3 的宽度完全相同。我试过这个 css 但它并不特定于第 1 行:

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

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

Answer 1

应该这样做:

#row1 > div
{
    width: 80px;
}

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