CSS дизайн структуры

Question

У меня больше двадцати делений. Div имеют идентификаторы #div_1,#div_2,#div_3 ...

У каждого элемента есть кнопка и изображение. и они названы одинаковыми в каждом div: #button_1, #image_1.

Возможно ли построить мой CSS следующим образом:

#div1 {
  #button_1{ };

  #image_1{};  
}


#div2 { 
  #button_1{};

  #image_1{};  
}

Answer 1

Во-первых, вы никогда не должны использовать один и тот же идентификатор более одного раза на одной странице. Весь смысл идентификатора в том, что он уникален.

Поэтому наличие кнопки под названием id='button_1' внутри каждого из ваших div'ов - это неправильно.

Если вы хотите использовать одну и ту же ссылку несколько раз, используйте класс вместо ID. Таким образом, ваши кнопки, например, должны быть class='button_1' вместо.

Во-вторых, синтаксис, который вы запрашиваете, неверен. Вы не можете вкладывать CSS таким образом. Однако то, что вы просите, может быть достигнуто довольно легко; просто соедините селекторы вместе так:

#div1 .button_1 { ... }
#div1 .image_1 { ... }

#div2 .button_1 { ... }
#div2 .image_1 { ... }

и т.д.

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

.button_1 { ... }
.image_1 { ... }

Любые стили, которые отличаются между ними, вы все равно можете объявить так же, как обсуждалось ранее, поэтому весь ваш CSS может выглядеть так:

/* shared styles for all the buttons */
.button_1 { ... }
/* shared styles for all the images */
.image_1 { ... }

/* extra styles only applying to the ones in div1 */
#div1 .button_1 { ... }
#div1 .image_1 { ... }

/* extra styles only applying to the ones in div2 */
#div2 .button_1 { ... }
#div2 .image_1 { ... }

... и т.д.

Надеюсь, это поможет.

Answer 2

идентификаторы уникальны, вы не должны повторять их на странице.Вы не можете иметь несколько #button_1's и #image_1's

Что вы действительно должны делать:

HTML

<div id="div-1" class="foo">
    <button id="button-1">Hello</button>
    <img src="blah.gif" id="img-1" />
</div>


<div id="div-2" class="foo">
    <button id="button-2">Hello</button>
    <img src="blah.gif" id="img-2" />
</div>


<div id="div-3" class="foo">
    <button id="button-3">Hello</button>
    <img src="blah.gif" id="img-3" />
</div>

CSS

.foo { ... }
  .foo button { ... }
  .foo img { ... }

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

Answer 3

Что вы можете сделать, это написать что-то вроде:

#div2 #button_1{

}

#div2 #image_1{

}

, если вы пытаетесь сделать правила CSS доступными только для объектов внутри определенного div (в приведенном выше примере они применяются только кДивы внутри div2.

Answer 4

Взгляните на http://sass -lang.com / вы хотите использовать миксин

Answer 5

Нет, вы не можете так написать свой CSS. В любом случае, если вы обнаружите, что разрабатываете 20 отдельных DIV в серии, вы делаете что-то не так. Для вас было бы проще написать стили для классов, а не писать их для идентификаторов