html - 当类名之间显示空格时如何编辑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 中显示这样的类时对这个元素进行更改。

score 0 · Accepted Answer

0

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

于 2013-11-04T21:23:51.947 回答

score 0 · Accepted Answer

您可以发布一个 URL，以及您要编辑的部分吗？这将有很大帮助。

如果您要问：

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

score 0 · Accepted Answer

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;
}

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

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

并使用以下 CSS 使其更小：

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

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

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

.wp-post-image {
  ...
}

或者

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

3 回答 3