CSS正确的类选择器理解

Question

现在我以这种方式获得了代码;

CSS：

.dhimage{
 width:25px;
 height:25px;
}

JAVASCRIPT：

var image = document.createElement('img');
image.className= 'dhimage';

如果我像这样格式化CSS会有什么变化：

.something .dhimage{
 width:25px;
 height:25px;
}

Answer 1

这意味着，您新创建的图像必须位于具有类something的容器内，然后才会将类dhimage的属性应用于它。即

<div class="something" >
   <img class="dhimage" />
</div>

如果你的标记如上所述，那么只有在css之下才能正常工作

.something .dhimage
{
   width:25px;
   height:25px; 
}

它被称为CSS specificity。

但是，如果直接定义css，即

.dhimage
{
   width:25px;
   height:25px; 
}

它将独立于父母的CSS。

现在为什么要这样做。

说你有一个班级名menu。但是您希望菜单类对于页面页脚内的菜单不同，而页面标题内的菜单则不同，但是您仍然希望保留名称menu，因为您对所有菜单也有一些共同的规则网站上的菜单，如font-family或其他。然后你可以按如下方式定义它：

.menu
{
   font-family:'Times';
}
.header .menu
{
  color:Red;
}
.footer .menu
{
  color:Orange;
}

，您的标记就像

<div class="header">
  <ul class="menu">
  </ul>
</div>

<div class="content">
</div>

<div class="footer">
  <ul class="menu">
  </ul>
</div>

页眉和页脚菜单会有不同的颜色。

Answer 2

除了以下事实之外，没有什么，为了使.dhimage的样式生效，包含该类的元素必须位于具有类.something的元素内。