1

Не понимаю в чем отличие записи при наследование классов в CSS .

.class1.class2{
    text-decoration: line-through;
}

или так

.class1{
    color:red;
}

.class2{
    font-size:100px;
}

Результат получается разный.

http://jsfiddle.net/Kirg/s9eyc30L/7/

4
  • То есть, результат вам ни о чем не сказал?
    – smackmychi
    11 ноя 2014 в 14:18
  • есть же такое правило,что все, что ниже по коду , отменяет то,что описано выше!?
    – Körg
    11 ноя 2014 в 15:02
  • @Kirg то есть, в вашем представлении вообще все должно отмениться?)))))))) Остаться должен только один! (С)
    – smackmychi
    11 ноя 2014 в 15:07
  • нет, но это объясняет почему первый перечёркнут, а не подчёркнут. jsfiddle.net/Kirg/s9eyc30L/7
    – Körg
    11 ноя 2014 в 15:15

1 ответ 1

1

.class1.class2 будет применен к блоку, которые имеет сразу два класса на себе class1 и class2.

.class1 будет применен к тому блоку, где есть класс class1. Логично предположить, что блок <div class="class1 class2"> применит к себе эти стили. Так же и с .class2.

Если у вас блок просто <div class="class1"> (или .class2), то стили .class1.class2 не будут применены.


О чем должен говорить результат?

.class1{
    color:red;
}

Цвет в блоках, где есть этот класс красный? Красный.

.class2{
    font-size:100px;
}

Размер текста 100px где есть этот класс? 100px.

.class3{
    text-decoration: underline;
}

Текст подчеркнутый в блоке, где есть этот класс? Нет. Почему? Потому что ниже

.class1.class2{
    text-decoration: line-through;
}

Перечеркнутый? Не подчеркнутый? Да. Почему? Потому что приоритет стилей снизу вверх по файлу стилей.

.class1 .class2{
    text-shadow: 3px 3px #ff0000;
}

Тень есть у блока с классом .class2, который находится в блоке с классом .class1? Да.

Ну все. Не знаю, какие могут быть вопросы еще))

4
  • Спасибо. Не скажу,что понял все четко . Вот так - правильно размышляю ? .class1.class2{ /* как одно название класса*/ text-decoration: line-through; } .class1 .class2{ /* перечисление через пробел применяемых классов*/ text-shadow: 3px 3px #ff0000; }
    – Körg
    11 ноя 2014 в 14:57
  • @Kirg Второй вариант применится к блок class2, который лежит внутри .class1
    – acidernt
    11 ноя 2014 в 22:47
  • @Kirg ловите апдейт ответа)
    – acidernt
    11 ноя 2014 в 23:42
  • Прекрасно ! Благодарю !
    – Körg
    12 ноя 2014 в 13:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.