用於定義特定網站內容/部分的CSS3方法

Question

什麼是識別CSS3樣式表中特定部分或內容的最佳正確方法。

舉例來說，如果我有這樣的規定對所有圖像的圖像語法：這裏

/* Image */ 

    .image { 
     border: 0; 
     display: inline-block; 
     position: relative; 
    } 

現在我想爲一個特定部分中的圖像定義不同的設置，例如：

<!-- One --> 
     <section id="one" class="wrapper major-pad"> 

什麼是正確的做法？在CSS語法中使用節ID或類？ （請告知我應該使用的正確語法）。

Answer 1

如果你有相同的類許多部分，但要針對在一個特定的圖像，使用ID

#one .image { ... } 

如果你想針對一個區間內的圖像與給定類，用類

.wrapper.major-pad .image { ... } 

或

.wrapper .image { ... } 

或

.major-pad .image { ... } 

---

更新基於評論，呈現出簡單的樣品

.wrapper .image { 
 
    border: 5px dotted red; 
 
}

<section id="one" class="wrapper major-pad"> 
 
    <img class="image" src="http://placehold.it/300x100/"> 
 
</section>