Практика селекторов классов и потомков CSS

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

Во многих случаях вместо использования классов можно использовать селекторы потомков для нацеливания на те же элементы. Если одно и то же можно сделать обоими способами, то какова логика выбора варианта?

Вот несколько примеров сценариев.:

1.

a.

<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
</div>

.main > div > div

б.

<div class="main">
     <div>
         <div class="content">
             <div></div>
         </div>
     </div>
</div>

.content

2.

а.

<div class="main">
     <div> /* target */
        <div></div>
     </div>
     <div> /* target */
        <div></div>
     </div>
</div>

.main > div:first-child
.main > div:last-child

б.

<div class="main">
     <div class="content1">
        <div></div>
     </div>
     <div class="content2">
        <div></div>
     </div>
</div>

.content1
.content2

3.

а.

<div class="main">
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.main > div div

б.

<div class="main">
     <div class="content">
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.content div

Какова логика между решением использовать классы или селекторы потомков?

7
задан bfavaretto 20 April 2012 в 00:56
поделиться