如何在顯示類名之間的空格時編輯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

你可以發佈一個URL，你想編輯的一部分嗎？這將有極大的幫助。

如果你問：

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

2選擇該CSS。

例如：

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

但你想重置按鈕較小。 在你可以給按鈕重置第二類名的話：

<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