CSS - групповые же классы следующих друг с другом

Question

я в настоящее время имеют структуру, как это:

<div class="a">Something</div> 
<div class="a">Something</div> 
<div class="a">Something</div> 
<div class="b">Something</div> 
<div class="b">Something</div> 
<div class="a">Something</div> 

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

по следующему пути его можно в определенной степени:

div { 
margin-top: 20px; 
} 
.a+.a, .b+.b { 
margin-top: 0px 
} 

однако вся моя HTML структура работает с маржинальным-клеш - поэтому я ищу для подобного решения, которое будет работать с недостаточной мере снизу вместо margin-top.

Answer 1

Возможно использование sibling selector. Я добавил в фрагмент ниже divs и span, чтобы проиллюстрировать суть. Вы можете установить маржу на пролете, используя класс или идентификатор, но таким образом, вы можете применить его в более общем случае, где бы вы Div с последующим пролете, сделайте запас (или любой другой стиль хочешь применить)

div, span{ 
 
    border: 1px solid blue; 
 
    display:block; 
 
    width: 100px; 
 
    height: 30px; 
 
} 
 
div + span { 
 
    margin:10px; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<span>1</span> 
 
<div>5</div>

Answer 2

Вы можете сделать это, используя jQuery.

$("img").next("div").css('margin','10x 0px'); 

Answer 3

Или вы можете просто дать создать margin-bottom класс и применить его к вашим img тегам, которые вы хотите осуществить.

<img src="image.png/> 
<img src="image.png/> 
<img src="image.png/> 
<img src="image.png/> 
<div>Something</div> 
<img class="botMargin" src="image.png/> 

.botMargin { 
    bottom-margin: 20px; 
} 

Answer 4

Вот что я в настоящее время использовать - если нет ответа, я буду отмечать это как решение

http://codepen.io/anon/pen/vNRrdo

<div class="a">Class a</div> 
<div class="a">Class a</div> 
<div class="a">Class a</div> 
<div class="a">Class a</div> 
<div class="b">Class b</div> 
<div class="c">Class c</div> 
<div class="c">Class c</div> 
<div class="c">Class c</div> 
<div class="c">Class c</div> 
<div class="a">Class a</div> 
<div class="a">Class a</div> 
<div class="b">Class b</div> 
<div class="b">Class b</div> 
<div class="b">Class b</div> 
<div class="a">Class a</div> 
<div class="c">Class c</div> 
<div class="c">Class c</div> 

CSS

div { 
    width: 200px; 
    text-align: center; 
    line-height: 50px; 
    margin-top: 20px; 
} 

.a { 
    background-color: red; 
} 

.b { 
    background-color: blue; 
} 

.c { 
    background-color: green; 
} 

.a + .a { 
    margin-top: 0; 
} 

.b + .b { 
    margin-top: 0; 
} 

.c + .c { 
    margin-top: 0; 
} 

Проблема с это то, что этот использует margin-top. Вся моя структура страниц использует margin-bottom - поэтому я ищу решение margin-bottom, которое работает аналогично без ручной настройки для каждого типа элемента.

Answer 5

В CSS3 большинство селекторов работают по потоку DOM.

Это означает, что нет способа дать стиль элементу, на основе которого элементы будут возникать после элемента. (Единственное исключение из этого - псевдо-n-ый-последний-псевдоним).

Чтобы получить результат, который вы хотите, вам нужно быть хитроумным, играть с верхним краем и установить его на минус нижнее значение. (Таким образом, общая сумма составляет 0)

div { 
 
    height: 50px; 
 
    margin: 10px; 
 
} 
 

 
.a { 
 
    border: solid 1px red; 
 
} 
 

 
.b { 
 
    border: solid 1px green; 
 
} 
 

 
.a+.a, .b+.b { 
 
    margin-top: -10px; 
 
}

<div class="a">Something</div> 
 
<div class="a">Something</div> 
 
<div class="a">Something</div> 
 
<div class="b">Something</div> 
 
<div class="b">Something</div> 
 
<div class="a">Something</div>