Question

在.css文件中，我找到了代码

.row { margin-bottom: 1.5em; }

.row .row { margin-top: 0.8em;  margin-bottom: 0; }

html包含代码

<div class="row">  <div class="col-md-1"> <p>.col-md-1</p> </div> </div>

以.row .row开头的css的目的/含义是什么？

在整个代码中，在具有类行的另一个div中没有带有类行的div。这是否意味着永远不会使用.row .row？

Answer 1

它们之间没有逗号，表示包含类row的元素，该元素包含在具有类row的另一个元素中。

Answer 2

.row .row选择父.row：

的内部.row

<div class="row">
   <div class="row">This will be selected</div>
   <div>
      <p class="row">This will also be selected</p>
  </div>
</div>

因此将选择具有行类的行类的任何子元素。

Answer 3

您可以在此处查看结果：DEMO

只有父.row的内部.row元素会受此影响。

<div class="row"> 
    <div class="row"> test </div>
    <div class="col-md-1"> 
        <p>.col-md-1</p> 
    </div> 
</div>


.row { margin-bottom: 1.5em; background:rgba(0,0,0,1); color:#fff;}

.row .row { margin-top: 0.8em;  margin-bottom: 0; background:rgba(0,250,0,1); }

在css文件中重复的类名

3 个答案: