Блог

Главная - Вопросы по программированию - Как создать повторно используемый класс CSS, который зависит от нескольких divs?

Как создать повторно используемый класс CSS, который зависит от нескольких divs?

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать стиль класса CSS повторно используемым для всей веб-страницы, но он был впервые создан в нескольких разделах. Как я могу превратить его в повторно используемый стиль, используя только один класс и только один div?

Пример:

У меня есть это:

 <div class="style-1">
     <div class="style-2">
         <div class="element"></div>
     </div>
 </div>

И я хочу, чтобы это было так:

 <div class="styled-element"></div> <!-- all styles above were applied by this one class on this single div -->

Комментарии:

1. ваш вопрос очень широкий. Можете ли вы предоставить подробную информацию с соответствующим CSS, чтобы показать, что вы имеете в виду? По умолчанию большинство атрибутов будут унаследованы дочерними элементами.

2. Извините за это, например, у меня есть изображение, оно должно отображаться в форме круга и иметь круг на границе в качестве орнамента. Для этого я создал div в форме круга и поместил в него изображение, получив 100% ширины и высоты. Орнамент был создан с помощью псевдоэлемента ранее. <div class = «circle»> <img src = «» alt = «»> </div> Я хочу иметь возможность добавлять класс к тегу изображения, который применяет все стили, упомянутые выше, без зависимости от других разделов. <img class = «style» src = «» alt = «»> возможно ли это?

3. Вы знаете, что вы можете добавить несколько классов в div, верно? <div class="style-1 style-2 element"></div>

4. Да, я пробовал, но невозможно добавить псевдоэлемент before в тег изображения. Есть ли способ сделать это?

Ответ №1:

Вы можете применить сколько классов вы хотите к элементу и повторно использовать их в любом элементе.

Например, предположим, что у вас есть класс элемента button.

 .button {
    padding: 5px 10px;
    background-color: #ddd;
    border: none;
    color: black;
}

И вы хотите создать варианты этих кнопок.

 .button-blue { background-color: #2196f3; color: #2196f3 }
.button-green { background-color: #2196f3; color: #45a163 }

Затем вы можете прикрепить эти классы к любой кнопке

 <button class="button button-blue">Blue button</button>
<button class="button button-green">Green button</button>

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

 <div class="button-blue">Only a div with a blue background and white text :)</div>
Метки: ,