CSS - селектор первого ребенка сильнее, чем селектор класса

Question

CSS - селектор первого ребенка сильнее, чем селектор класса

0

Я хочу запустить анимацию CSS, добавив класс в элемент списка, который был создан с помощью селектора первого родителя. Но каким-то образом текущий стиль не перезаписывается добавленным классом.

js скрипка

HTML

<ul class="start">
<li id="box" >move up onHover</li>
</ul>
<div id="button">hover</div>

CSS

.start li:first-child{

height:100px;
width:100px;
background: red;
opacity: 1;
transform: translate(0, 190px); 
transition: all 2.0s linear;

}

.change{
 opacity: 1;
 transform: translate(0, 0px);
 }

#button{
width: 80px;
height: 20px;
padding: 4px;
margin-left: 333px;
border:solid 1px black;
background: grey;
cursor: pointer;
color: white;
}

JS

    $('#button').hover(function() {
  $('#box').addClass('change');
})

user2520410 18 дек. 2013, в 19:27

Источник

Теги:

jquery

html

css

2 ответа

0

.start li:first-child переопределяет стиль .change

+ Изменить

.change{}

в

.start li.change{}

Обновлена скрипка.

Hiral 18 дек. 2013, в 16:10

Ещё вопросы

adeneo · Accepted Answer · 2013-12-18T15-09-00.000Z

Это не то, что это сильнее, но нацеливание на родителя, а затем на LI более конкретное, поэтому вы должны быть столь же конкретны, когда добавляете новый класс

.start li.change

FIDDLE

спасибо, но это также плохо использовать "li.class", который я читал в stackoverflow
Это неплохо, если вам нужно переписать более специфические стили, и это не так уж плохо в CSS, но в селекторе jQuery это может вызвать дополнительную работу, но и в этом нет ничего плохого.