用于定义特定网站内容/部分的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>