1

Каким образом здесь зависит порядок селекторов? Переход не работает если поставить класс перехода первым https://jsfiddle.net/7u5z943r/ Какая разница? Ведь браузер запоминает весь поток целиком.

$(document).ready(function(){


    $('div').click(function(){
       $('.q').toggleClass('q1'); 
    }); 
    
});
.q1{
    background: red;
}
.q{
    width: 200px;
    height: 200px;
    background: black;
    transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q"></div>

1
  • CSS - Cascading Style Sheets
    – soledar10
    10 янв 2017 в 10:24

2 ответа 2

4

Как раз таки, порядок определения стилей и является ключевым. Свойства стиля, написанного ниже(после), перекрывают свойства стиля написанного выше(до).

$(document).ready(function(){


    $('div').click(function(){
       $('.q').toggleClass('q1'); 
    }); 
    
});
.q{
    width: 200px;
    height: 200px;
    background: black;
    transition: all 1s;
}
.q1{
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q"></div>

2
  • Простая каскадность получается?
    – PeGaS
    10 янв 2017 в 10:21
  • @PeGaS, да, собссно, как и гласит название - Каскадные таблицы стилей
    – SLy_huh
    10 янв 2017 в 10:24
1

Как выше написали в данном случае решающее значение имеет порядок, оно и понятно, браузеру же нужно какой-то один стиль выбрать, но для такой задачи еще можно указать стиль для элемента, который имеет оба класса .q.q1, тогда определяющим будет этот стиль, а не порядок.

$(document).ready(function(){


    $('div').click(function(){
       $('.q').toggleClass('q1'); 
    }); 
    
});
.q.q1{
    background: red;
}
.q{
    width: 200px;
    height: 200px;
    background: black;
    transition: all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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