Метод CSS3 для определения конкретного содержимого сайта/секций

Question

Каков наилучший и правильный способ определения определенных разделов или содержимого в таблице стилей CSS3.

Например, если у меня есть синтаксис изображения, определенный как это для всех изображений:

/* Image */ 

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

А теперь я хочу, чтобы определить различные параметры для изображений внутри определенной секции, например, здесь:

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

Каков правильный способ сделать это? Использование Раздел ID или Класс в синтаксисе CSS? (пожалуйста, сообщите правильный синтаксис, который я должен использовать).

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>