Порядок потока селекторов в css

329

11 января 2017, 03:16

Каким образом здесь зависит порядок селекторов? Переход не работает если поставить класс перехода первым 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>

Answer 1

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

$(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>

Answer 2

Как выше написали в данном случае решающее значение имеет порядок, оно и понятно, браузеру же нужно какой-то один стиль выбрать, но для такой задачи еще можно указать стиль для элемента, который имеет оба класса .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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

не срабатывает break в js коде

Здравствуйтеесть код проверки существования юзера, который выполняется но, если юзер существует он должен выдать в консоль "юзер существует"...

377

jQuery

В цикле не обновляются данные

Есть карта на ней маркерКоординаты получаю из БД

300

jQuery

Как получить свойство background через jquery

В браузере google chrome все работает, а firefox ничего не находит, в консоле либо пусто либо null

507

jQuery

Не могу понять ошибку “Uncaught ReferenceError: var is not defined”

Обновляю данные вывожу их в лог все ок получаю обновленные данные, но когда на деле их вставляю, то выдает:

454