Как вызвать несколько классов CSS в одном классе?

Я сделал одну кнопку:Как вызвать несколько классов CSS в одном классе?

<input type="button" class="btn-custom btn btn-info" />

CSS код

.btn-info { 
    background-color: #6fb3e0!important; 
    border-color: #6fb3e0; 
} 
.btn{padding:5px 10px} 
.btn-custom{height:20px;}

Я хочу объединить стиль btn-custom и btn btn-info в одном классе под названием .btnCustom.

Короче я хочу такой же результат, когда я пытаюсь это:

<input type="button" class="btnCustom" />

источник

2015-09-24 Shurvir Mori

Что останавливает вас, включая эти классы в html ?? –

–

Зачем вы хотите это сделать? У вас будет другой класс, о котором нужно подумать и запомнить. Ваш CSS будет становиться все более сложным и быть более подверженным ошибкам. Вскоре у вас возникнет соблазн использовать предварительный процессор CSS, потому что его функция 'extend' выглядит классно, выбор, который вы, несомненно, пожалеете. Но, кроме того, людям, читающим ваш HTML, будет труднее посмотреть, что происходит. Очень важно, чтобы при разработке CSS были созданы более мелкие классы, каждый из которых делает одно, точно так же, как '.btn-info' и т. Д., И указывать несколько классов в HTML-элементах как способ комбинирования поведения классов. –

-1

Привет теперь попробуйте less CSS, чем определить тот класс в одном классе, как этот

чем пытаться это способ

.btnCustom{ 
.btn(); 
.btn-info(); 
height:20px; 
}

источник

2015-09-24 05:42:42

вы можете попробовать, как это -

.btnCustom, .btn-info { 
 
    background-color: #6fb3e0!important; 
 
    border-color: #6fb3e0; 
 
} 
 
.btnCustom ,.btn{ 
 
    padding:5px 10px; 
 
} 
 
.btnCustom ,.btn-custom{ 
 
    height:20px; 
 
}

<input type="button" class="btnCustom"/>

источник

2015-09-24 05:43:00

-1

Вы должны препроцессор, такие как less или sass

.class1 { 
    color: #333; 
} 

.class2 { 
    @extend .class1; 
    border-color: green; 
}

В противном случае вы должны придерживаться

<input type="button" class="btn-custom btn btn-info" />

источник

2015-09-24 05:43:07 Underfrog

Нет, ему не нужен препроцессор. Ему нужен общий здравый смысл CSS. –

Он задал вопрос, и я ответил. – Underfrog

-1

Вы можете фактически объединить все классы в один селектор, подобный этому;

.btn-custom.btn.btn-info { 
}

Это отобразит только элементы со всеми этими классами.

Будет ли это делать то, что вы хотите?

Есть некоторые хорошие другие ответы. Использование меньше или sass скорее всего сделает то, что вы хотите.

Be careful with how you use commas in your selectors.

источник

2015-09-24 05:53:58 Christian

Это не то, о чем он спрашивает. –

@torazaburo Это может сделать то, что он хотел, поэтому почему я сказал: «Будет ли это делать то, что вы хотите?» - downvote был немного грубым – Christian

-1

Вы должны использовать некоторые препроцессор как менее или дерзости. (Вы также можете использовать простой CSS. Просто используйте код сгенерированный CSS из кода SASS/SCSS).

Использование дерзость вы можете сделать это нравится:

HTML код

<input type="button" class="btnCustom" />

SASS/SCSS код

.btn-info { 
    background-color: #6fb3e0!important; 
    border-color: #6fb3e0; 
} 

.btn{ 
    padding:5px 10px 
} 

.btn-custom{ 
    @extend .btn; 
    @extend .btn-info; 
    height:20px; 
}

Сформирован CSS код после компиляции SASS/SCSS Код

.btn-info, .btn-custom { 
    background-color: #6fb3e0!important; 
    border-color: #6fb3e0; 
} 

.btn, .btn-custom{ 
    padding:5px 10px 
} 

.btn-custom{ 
    height:20px; 
}

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

источник

2015-09-24 06:54:48

Вы * должны * ?? –

Вы можете использовать Css, как это,

.btnCustom, .btn-info { 
    background-color: #6fb3e0!important; 
    border-color: #6fb3e0; 
} 
.btnCustom ,.btn{ 
    padding:5px 10px; 
} 
.btnCustom ,.btn-custom{ 
    height:20px; 
}

и Html

<input type="button" class="btn-custom btn btn-info" />

Его работа в моем сайте.

источник

2016-07-01 06:13:33

Как вызвать несколько классов CSS в одном классе?

ответ

Смежные вопросы