css - 类在 CSS 中的使用

Question

谁能解释一下下面的区别:

div.main 
{
font-family:Arial, sans-serif;
}

.main div 
{
font-family:Arial, sans-serif;
}

我不确定何时使用每一个。

Answer 1

我将为每个 css 样式提供示例 HTML 代码:

第一个示例 - 将所有具有 main 类的 div 设为目标

div.main {
  color:red;
}

<div class="main">
  <p>SAMPLE</p>
</div>

第二个示例 - 将所有 div 作为具有 main 类的元素的子元素的目标

.main div {
  color: red;
}

<div class="main">
  <p>NOT AFFECTED</p>
  <div>
    <p>AFFECTED</p>
  </div>
  <div>
    <p>AFFECTED</p>
  </div>
  <div>
    <p>AFFECTED</p>
  </div>
  <div>
    <p>AFFECTED</p>
  </div>
</div>