Question

有人可以解释下面的区别：

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

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

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

Answer 1

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

第一个示例 - 定位具有div类

的所有main

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>

Answer 2

我认为你应该通过实施或阅读css选择器和css特异性来学习所有这些。

了解更多信息css selector

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

上面的代码将定位所有以main作为类的div。

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

上面的代码将定位所有main类的孩子的div。

Answer 3

您的第一条规则是：

查找具有div类

的所有main个元素

您的第二条规则是：

查找位于所有元素 main类内的所有div 。

请阅读CSS的基本概念

在CSS中使用类

3 个答案: