css - 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

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

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

如果你的标记像上面那样，那么只有在 css 下面才会起作用

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

它被称为CSS 特异性。

但是，如果您直接定义 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

没什么，真的，除了这样一个事实，为了使样式 from.dhimage有效，包含该 class 的元素必须在具有 class 的元素内.something。