Подскажите в чем отличия в этих классах

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем gtx, 8 мар 2014.

Статус темы:
Закрыта.
  1. gtx

    gtx

    Регистрация:
    8 янв 2013
    Сообщения:
    108
    Симпатии:
    10
    Подскажите в чем отличия в этих классах


    .classa1 .classb1 { }

    .classa1, .classb1 { }

    .classa1.classb1 { }

    .classa1>.classb1 { }
     
  2. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    htmlbook.ru раздел селекторы

    если в кратце .classa1 .classb1 { } сработает <div class="classa1"><div class="classb1">для этого</div></div>

    если в кратце .classa1, .classb1 { } сработает <div class="classa1">для этого</div> <div class="classb1">для этого</div>
    аналогично двум правилам .classa1 {} .classb1 { }

    .classa1.classb1 { } сработает для <div class="classa1 classb1">для этого</div>

    .classa1>.classb1 { } походе на первое, но с уточнением что только при дочерности, коороче http://htmlbook.ru/samcss/dochernie-selektory
     
    gtx нравится это.
  3. gtx

    gtx

    Регистрация:
    8 янв 2013
    Сообщения:
    108
    Симпатии:
    10
    <div class="classa1 classb1">для этого</div>

    а зачем используется такая запись?
     
  4. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    к примеру общий вид кнопки задается классом .button {ширина, высота, радиус там}
    и тебе нужны разные кнопки - зеленая, желтая и красная

    так вот что б каждый раз не дублировать {ширина, высота, радиус} просто добавляешь класс .green {цвет фона и шрифта}
    и делаешь кнопку class="button green"

    ну да это основы, читай htmlbook.ru
     
Статус темы:
Закрыта.