如何在类名之间显示空格时编辑CSS？

Question

我正在尝试对已经制作的Wordpress主题进行一些样式更改。例如，在商店部分，我想让图像更宽一些。我安装了浏览器插件Firebug，它允许我将鼠标悬停在元素上，直接进入代码。所以我将鼠标悬停在图像上，我看到了：

<img class="attachment-shop_catalog wp-post-image">

我在尝试编辑CSS时一直看到这个。类名之间有空格。这是为什么？我该如何编辑？我试过了

.attachment-shop_catalog{
 (css code)
 }

以及

.wp-post-image{
(css code)
}

以及整个事情

.attachment-shop_catalog wp-post-image{
(css code)
}

并且不做任何更改。我想知道如何在显示类似的类时对CSS中的这个元素进行更改。

Answer 1

要专门编辑该类组合，请使用.attachment-shop_catalog.wp-post-image

Answer 2

您可以发布网址以及您要编辑的部分吗？这将有很大帮助。

如果你问：

.attachment-shop_catalog wp-post-image{
------------------------^ THIS SPACE HERE?

该css的2个选择器。

例如：

#header.showcase {
    CSS STUFF (EXAMPLE 1)
}

#header .showcase {
    CSS STUFF (EXAMPLE 2)
}

完全不同于此：

<div id="header" class="showcase">THIS IS EXAMPLE 1</div>

<div id="header"><div class="showcase">THIS IS EXAMPLE 1</div></div>

Answer 3

attachment-shop_catalog是一个类名。 wp-post-image也是一个班级名称。

例如，您有2个具有相同名称的类：

<div class="button">Apply</div>
<div class="button">Reset</div>

和CSS：

.button {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

但您希望按钮Reset更小。 在这种情况下，您可以给按钮重置第二个类名：

<div clas="button reset">Reset</div>

并使用以下CSS将其缩小：

.reset {
  height: 50px;
  width: 50px;
}

然后按钮会显得更小，但它仍然具有与应用按钮相同的样式。

因此，您可以使用以下CSS设置类attachment-shop_catalog wp-post-image的样式：

.wp-post-image {
  ...
}

或

.attachment-shop_catalog.wp-post-image {
  ...
}

DEMO