Css группировка нескольких классов id`s

Question

У меня есть что-то вроде этого:

<div id="attributes1"><span class="heading_fieldset"></div> 
<div id="attributes2"><span class="heading_fieldset"></div> 

и

#attributes1 .heading_fieldset { 
    display:inline-block; 
    width: 30px; 
} 
#attributes2 .heading_fieldset { 
    display:inline-block; 
    width: 30px; 
} 

как можно группировать CSS, чтобы быть чем-то вроде (следующий CSS не хорошо .. .it портит мою страницу):

#attributes1, #attributes2 .heading_fieldset { 
    display:inline-block; 
    width: 30px; 
} 

Спасибо

Answer 1

Вы могли бы использовать:

#attributes1 .heading_fieldset, #attributes2 .heading_fieldset { 
    display:inline-block; 
    width: 30px; 
} 

Вы пытаетесь добавить свойства элементов: #attributes1 и .heading_fieldset с родителем #attributes2.

---

Я не знаю, полный контекст того, что вы пытаетесь сделать, так это может не работать - однако, вы могли бы, вероятно, просто применить эти свойства .heading_fieldset без выбора родителя. Это уменьшит некоторую избыточность.

Answer 2

В этом случае я использую классы

HTML:

<div class="attributes"><span class="heading_fieldset"></div> 
<div class="attributes"><span class="heading_fieldset"></div> 

CSS:

.attributes > .heading_fieldset { 
    display:inline-block; 
    width: 30px; 
} 

Но, если вам действительно нужны идентификаторы, используйте

<div id="attributes1" class="attributes"><span class="heading_fieldset"></div> 
<div id="attributes2" class="attributes"><span class="heading_fieldset"></div> 

который возможно, повторяется, но Я предпочитаю это, чем ужасная и нечитаемая таблица стилей

Answer 3

Я бы сказал, что вы должны придерживаться классов. Сохранить идентификаторы для взаимодействия с javaScript или специальные вещи. Таким образом, вы можете создать все .attribute то же самое - и затем .thing01 или что угодно, чтобы получить более конкретные стили. Ваши промежутки не закрыты, так что это проблема. Кроме того, вы, вероятно, должны использовать разметку заголовков, если они действительно являются заголовками. jsFiddle: - Вам действительно нужно немного переосмыслить CSS и помнить, что он в принципе читает справа налево. Поэтому, когда вы пишете: .thing .other-thing h1 { } upi говорят: «Примените эти стили к« всем h1, находящимся внутри .other-вещь, которая находится внутри .thing ». Я надеюсь, что помогает!

HTML

<div class="attribute thing01"> 
    <h2>Your heading</h2> 
</div> 

<div class="attribute thing02"> 
    <h2>Your heading</h2> 
</div> 

CSS

.attribute { 
    display:inline-block; 
    width: 30px; 
    /* example CSS */ 
    border: 1px solid red; 
    padding: .5em; 
} 

.thing01 { 
    background-color: red; 
} 

.thing02 { 
    background-color: lightblue; 
} 

.attribute h2 { 
    font-size: 1.5em; 
}