2016-01-04 4 views
1

Как использовать три разных класса для одного и того же элемента? Имеет ли значение, что двое из них имеют один и тот же родительский класс? У меня есть ссылка типа, которая использует некоторые функции, поэтому у нее есть тип typeform. Но я хотел бы также сделать его .button.white и/или .button.transparentЛучший способ использования нескольких классов и подклассов для одного и того же элемента в CSS

Я в настоящее время пытается что-то вроде:

<a class="typeform-share button white button transparent"> 
<a class="typeform-share" class="button white" class="button transparent> 

Update: Я не понял, как классы работают в CSS. Теперь я обнаружил еще одну проблему - создаст новый вопрос. Спасибо вам всем!

+1

Нельзя использовать несколько классов для одного элемента. Но, просто позаботьтесь, то же самое css не применяется для одного элемента. например: 'padding: 5px' и во втором классе' padding: 10px'. он переопределит первый css – ketan

+0

Что вы подразумеваете подклассы и родительские классы? '.button.white' ничем не отличается от' .white.button' - он просто запрашивает элементы, которые являются членами обоих классов. – grc

+0

О! Я новичок в CSS. Я думал, что button.white означает, что этот белый цвет был частью класса кнопок. Как и я мог бы иметь button.white означает, что текст внутри кнопки белый, но header.white может означать, что цвет фона для заголовка белый. Я неправильно понял, как работают классы css –

ответ

2

Этот синтаксис HTML-разметки является недействительным:

<a class="typeform-share" class="button white" class="button transparent"> 

Вы не можете использовать несколько атрибутов с таким же именем. Если вы используете браузер, он будет использовать его первым объявленным, т.е. вышеизложенное будет:

<a class="typeform-share"> 

Чтобы использовать несколько классов, просто используйте значения, разделенные пробелами, как в предыдущей разметке. Но вы на самом деле не нужно ставить несколько раз тот же класс:

<a class="typeform-share button white button transparent"> 
<!--Remove one of the button class, you don't need to repeat--> 

Вот ссылка для how to work with multiple classes из CSS хитрости, которые сделают вашу жизнь проще.

+0

Как узнать, означает ли это подкласс или класс? Например, button.white и typeform-share ... если я использую «button white typeform-share», как он знает, что это button.white и typeform-share, а не button.white.typeform-share? –

+0

Проверьте ссылку, которую я предоставил. Это очистит вас все. –

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

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