Как передать свойства одного стиля другому?

Тема в разделе "Верстка", создана пользователем plas, 15 апр 2017.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. plas

    plas Создатель

    Регистр.:
    24 фев 2012
    Сообщения:
    49
    Симпатии:
    1
    Добрый день, сайт на WP, в шаблоне прописаны стили кнопки "btn btn-info" установлен плагин WPCC у него тоже есть кнопка, со своими стилями "wpcc_submit wpcc_submit_3" как назначить стили одной кнопки другой? ( что бы стиль wpcc_submit wpcc_submit_3 унаследовал все от стиля btn btn-info)
     
  2. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    51
    Симпатии:
    23
    Никак.
    Либо дописать классы "btn btn-info" к "wpcc_submit wpcc_submit_3" либо скопировать все свойства "btn btn-info" в "wpcc_submit wpcc_submit_3".
    Можно конечно скрипт написать который ищет "wpcc_submit wpcc_submit_3" и дописывает к ним "btn btn-info", но не думаю, что это хороший вариант.
     
  3. plas

    plas Создатель

    Регистр.:
    24 фев 2012
    Сообщения:
    49
    Симпатии:
    1
    Варианта дописать в CSS что-то типа .wpcc_submit {btn-info;} никакого нет?)
     
  4. zALEHANz

    zALEHANz Постоялец

    Регистр.:
    26 апр 2015
    Сообщения:
    51
    Симпатии:
    23
    Нет. CSS до такого еще не додумался. И судя по спецификациям и в css4 ничего подобного не будет. Там работы ведь на пару минут. Скопировать свойства с одного селектора и заменить на другом.
     
    plas нравится это.
  5. alex_me

    alex_me Постоялец

    Регистр.:
    25 янв 2017
    Сообщения:
    100
    Симпатии:
    65
    Для вложенных элементов можно использовать значение inherit
    Перейти по ссылке

    Но для того, о чем идет речь нужен scss:

    Код:
    // ++++++++++ Палитра цветов
    $deep-purple: #ff0099;
    $deep-orange: #ff5501;
    
    
    // ++++++++++ Миксины
    @mixin btn-alert {
        background: $deep-purple;
        color: white;
        &:focus {
            background: $deep-purple;
        }
        &:hover {
            background: lighten($deep-purple, 10);
            a {
                color: white;
            }
        }
    }
    
    // ++++++++ Стили
    
    // Делаем первую кнопку малиновой
    .my-button-1 {  
        @include btn-alert;
    }
    
    // Делаем вторую кнопку малиновой с оранжевой полоской
    .my-button-2 {  
        @include btn-alert;  
        border: 2px solid $deep-orange;
    }
     
    Последнее редактирование: 15 апр 2017
  6. $_Maclay

    $_Maclay Создатель

    Регистр.:
    5 май 2017
    Сообщения:
    15
    Симпатии:
    6
    Все очень просто. Необходимо добавить одинаковые стили в оба селектора.
     
  7. afdivi

    afdivi Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    29
    Симпатии:
    5
    Или дописать через запятую в css ещё один класс для дубликата параметров.
     
  8. quiksilver

    quiksilver Писатель

    Регистр.:
    18 май 2017
    Сообщения:
    5
    Симпатии:
    0
    если задача сделать кнопку в стиле btn btn-info, то удаляй в кнопке классы wpcc_submit wpcc_submit_3 и вставляй btn btn-info
     
  9. madrom007

    madrom007 Писатель

    Регистр.:
    7 сен 2013
    Сообщения:
    2
    Симпатии:
    0
    Самое простое решение в стилях найти .btn-info и .btn и добавить нужные к ним

    .btn
    .wpcc_submit,{
    /* стили */
    }


    .btn-info
    .wpcc_submit_3,{
    /* стили */
    }